├── .babelrc ├── .gitignore ├── .npmignore ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── LICENSE ├── README.md ├── article.md ├── dist ├── monadic_react.d.ts ├── monadic_react.js └── react_monad │ ├── combinators.d.ts │ ├── combinators.js │ ├── core.d.ts │ ├── core.js │ ├── editable_list.d.ts │ ├── editable_list.js │ ├── forms.d.ts │ ├── forms.js │ ├── html.d.ts │ ├── html.js │ ├── list.d.ts │ ├── list.js │ ├── option.d.ts │ ├── option.js │ ├── paginator.d.ts │ ├── paginator.js │ ├── primitives.d.ts │ ├── primitives.js │ ├── rich_text.d.ts │ ├── rich_text.js │ ├── router.d.ts │ ├── router.js │ ├── workflow.d.ts │ └── workflow.js ├── gulpfile.js ├── package.json ├── samples ├── Client │ ├── app.js │ ├── app.ts │ ├── fonts │ │ └── icomoon │ │ │ ├── Read Me.txt │ │ │ ├── demo-files │ │ │ └── demo.css │ │ │ ├── demo.html │ │ │ ├── fonts │ │ │ ├── icomoon.svg │ │ │ ├── icomoon.ttf │ │ │ └── icomoon.woff │ │ │ ├── selection.json │ │ │ ├── style.css │ │ │ ├── style.scss │ │ │ └── variables.scss │ ├── generated_api.js │ ├── generated_api.ts │ ├── generated_models.js │ ├── generated_models.ts │ ├── homepage.js │ ├── homepage.tsx │ ├── samples │ │ ├── button.js │ │ ├── button.tsx │ │ ├── context.js │ │ ├── context.ts │ │ ├── delay_wait.js │ │ ├── delay_wait.tsx │ │ ├── editable_list.js │ │ ├── editable_list.ts │ │ ├── form.js │ │ ├── form.ts │ │ ├── label.js │ │ ├── label.tsx │ │ ├── link.js │ │ ├── link.ts │ │ ├── list.js │ │ ├── list.ts │ │ ├── menu.js │ │ ├── menu.tsx │ │ ├── moments.js │ │ ├── moments.tsx │ │ ├── multiselector.js │ │ ├── multiselector.tsx │ │ ├── overlay.js │ │ ├── overlay.ts │ │ ├── pagination.js │ │ ├── pagination.ts │ │ ├── promise_sample.js │ │ ├── promise_sample.tsx │ │ ├── rich text.js │ │ ├── rich text.tsx │ │ ├── selector_and_custom_class.js │ │ ├── selector_and_custom_class.tsx │ │ ├── tabbed menu.js │ │ ├── tabbed menu.tsx │ │ ├── toggles.js │ │ └── toggles.tsx │ └── stylesheets │ │ ├── global │ │ ├── .gitkeep │ │ ├── _buttons.scss │ │ ├── _core.scss │ │ ├── _figures.scss │ │ ├── _forms.scss │ │ ├── _links.scss │ │ ├── _lists.scss │ │ ├── _spinners.scss │ │ ├── _tables.scss │ │ └── _typography.scss │ │ ├── objects │ │ ├── .gitkeep │ │ ├── _breadcrumbs.scss │ │ ├── _buttons.scss │ │ ├── _cards.scss │ │ ├── _column-view.scss │ │ ├── _controls.scss │ │ ├── _core.scss │ │ ├── _dropdowns.scss │ │ ├── _footer-sticky.scss │ │ ├── _footer.scss │ │ ├── _forms.scss │ │ ├── _header.scss │ │ ├── _helpers.scss │ │ ├── _list-styles.scss │ │ ├── _local-menu.scss │ │ ├── _menu.scss │ │ ├── _models.scss │ │ ├── _new-entity.scss │ │ ├── _searchform.scss │ │ ├── _switch.scss │ │ ├── _texteditor.scss │ │ └── _topbar.scss │ │ ├── overwrites │ │ ├── .gitkeep │ │ ├── _project-specific.scss │ │ └── _project-variables.scss │ │ ├── pages │ │ └── .gitkeep │ │ ├── settings │ │ ├── .gitkeep │ │ ├── _fonts.scss │ │ └── _variables.scss │ │ ├── site.scss │ │ ├── tools │ │ ├── .gitkeep │ │ └── _mixins.scss │ │ └── vendor │ │ ├── .gitkeep │ │ └── _normalize.scss ├── README.md ├── app.js ├── index.html └── wwwroot │ ├── css │ ├── Draft.css │ ├── site.css │ └── site.min.css │ ├── fonts │ ├── KaTeX_AMS-Regular.eot │ ├── KaTeX_AMS-Regular.ttf │ ├── KaTeX_AMS-Regular.woff │ ├── KaTeX_AMS-Regular.woff2 │ ├── KaTeX_Caligraphic-Bold.eot │ ├── KaTeX_Caligraphic-Bold.ttf │ ├── KaTeX_Caligraphic-Bold.woff │ ├── KaTeX_Caligraphic-Bold.woff2 │ ├── KaTeX_Caligraphic-Regular.eot │ ├── KaTeX_Caligraphic-Regular.ttf │ ├── KaTeX_Caligraphic-Regular.woff │ ├── KaTeX_Caligraphic-Regular.woff2 │ ├── KaTeX_Fraktur-Bold.eot │ ├── KaTeX_Fraktur-Bold.ttf │ ├── KaTeX_Fraktur-Bold.woff │ ├── KaTeX_Fraktur-Bold.woff2 │ ├── KaTeX_Fraktur-Regular.eot │ ├── KaTeX_Fraktur-Regular.ttf │ ├── KaTeX_Fraktur-Regular.woff │ ├── KaTeX_Fraktur-Regular.woff2 │ ├── KaTeX_Main-Bold.eot │ ├── KaTeX_Main-Bold.ttf │ ├── KaTeX_Main-Bold.woff │ ├── KaTeX_Main-Bold.woff2 │ ├── KaTeX_Main-Italic.eot │ ├── KaTeX_Main-Italic.ttf │ ├── KaTeX_Main-Italic.woff │ ├── KaTeX_Main-Italic.woff2 │ ├── KaTeX_Main-Regular.eot │ ├── KaTeX_Main-Regular.ttf │ ├── KaTeX_Main-Regular.woff │ ├── KaTeX_Main-Regular.woff2 │ ├── KaTeX_Math-BoldItalic.eot │ ├── KaTeX_Math-BoldItalic.ttf │ ├── KaTeX_Math-BoldItalic.woff │ ├── KaTeX_Math-BoldItalic.woff2 │ ├── KaTeX_Math-Italic.eot │ ├── KaTeX_Math-Italic.ttf │ ├── KaTeX_Math-Italic.woff │ ├── KaTeX_Math-Italic.woff2 │ ├── KaTeX_Math-Regular.eot │ ├── KaTeX_Math-Regular.ttf │ ├── KaTeX_Math-Regular.woff │ ├── KaTeX_Math-Regular.woff2 │ ├── KaTeX_SansSerif-Bold.eot │ ├── KaTeX_SansSerif-Bold.ttf │ ├── KaTeX_SansSerif-Bold.woff │ ├── KaTeX_SansSerif-Bold.woff2 │ ├── KaTeX_SansSerif-Italic.eot │ ├── KaTeX_SansSerif-Italic.ttf │ ├── KaTeX_SansSerif-Italic.woff │ ├── KaTeX_SansSerif-Italic.woff2 │ ├── KaTeX_SansSerif-Regular.eot │ ├── KaTeX_SansSerif-Regular.ttf │ ├── KaTeX_SansSerif-Regular.woff │ ├── KaTeX_SansSerif-Regular.woff2 │ ├── KaTeX_Script-Regular.eot │ ├── KaTeX_Script-Regular.ttf │ ├── KaTeX_Script-Regular.woff │ ├── KaTeX_Script-Regular.woff2 │ ├── KaTeX_Size1-Regular.eot │ ├── KaTeX_Size1-Regular.ttf │ ├── KaTeX_Size1-Regular.woff │ ├── KaTeX_Size1-Regular.woff2 │ ├── KaTeX_Size2-Regular.eot │ ├── KaTeX_Size2-Regular.ttf │ ├── KaTeX_Size2-Regular.woff │ ├── KaTeX_Size2-Regular.woff2 │ ├── KaTeX_Size3-Regular.eot │ ├── KaTeX_Size3-Regular.ttf │ ├── KaTeX_Size3-Regular.woff │ ├── KaTeX_Size3-Regular.woff2 │ ├── KaTeX_Size4-Regular.eot │ ├── KaTeX_Size4-Regular.ttf │ ├── KaTeX_Size4-Regular.woff │ ├── KaTeX_Size4-Regular.woff2 │ ├── KaTeX_Typewriter-Regular.eot │ ├── KaTeX_Typewriter-Regular.ttf │ ├── KaTeX_Typewriter-Regular.woff │ ├── KaTeX_Typewriter-Regular.woff2 │ └── icomoon │ │ ├── Read Me.txt │ │ ├── demo-files │ │ └── demo.css │ │ ├── demo.html │ │ ├── fonts │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ │ ├── selection.json │ │ ├── style.css │ │ ├── style.scss │ │ └── variables.scss │ ├── images │ ├── draftjs │ │ ├── bold-text-option.svg │ │ ├── bullets.svg │ │ ├── code.svg │ │ ├── header.svg │ │ ├── italicize-text.svg │ │ ├── numbers.svg │ │ ├── picture.svg │ │ ├── quotes.svg │ │ └── underline-text-option.svg │ ├── icon-cancel.svg │ ├── icon-danger.svg │ ├── icon-edit.svg │ ├── icon-enlarge.svg │ ├── icon-left.svg │ ├── icon-menu-down.svg │ ├── icon-menu-up.svg │ ├── icon-minus.svg │ ├── icon-plus.svg │ ├── icon-remove.svg │ ├── icon-right.svg │ ├── icon-scale-down.svg │ ├── icon-scale-up.svg │ ├── icon-shrink.svg │ ├── icon-translation-and-localization.svg │ ├── icon-unlink.svg │ ├── icon-user-list.svg │ ├── icon-user.svg │ ├── icon-view.svg │ └── logo.png │ ├── js │ └── site.js │ └── translations.json ├── src ├── monadic_react.ts ├── react_monad │ ├── combinators.tsx │ ├── core.tsx │ ├── editable_list.tsx │ ├── forms.ts │ ├── html.tsx │ ├── list.tsx │ ├── option.ts │ ├── paginator.tsx │ ├── primitives.tsx │ ├── rich_text.tsx │ ├── router.tsx │ └── workflow.ts ├── tsconfig.json └── yarn.lock ├── stylesheets ├── monadic │ ├── _content-menu.scss │ ├── _input-choices.scss │ ├── _playground.scss │ ├── _tabs.scss │ └── _title-preview.scss └── site.scss ├── todo.md ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | ./samples/* 2 | ./samples/lib 3 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name":".NET Core Docker Launch (web)", 6 | "type": "coreclr", 7 | "request": "launch", 8 | "preLaunchTask": "composeForDebug", 9 | "cwd": "/app", 10 | "program": "/app/MonadicComponents.dll", 11 | "sourceFileMap": { 12 | "/app": "${workspaceRoot}" 13 | }, 14 | 15 | "launchBrowser": { 16 | "enabled": true, 17 | "args": "${auto-detect-url}", 18 | "windows": { 19 | "command": "cmd.exe", 20 | "args": "/C start ${auto-detect-url}" 21 | }, 22 | "osx": { 23 | "command": "open" 24 | }, 25 | "linux": { 26 | "command": "xdg-open" 27 | } 28 | }, 29 | 30 | "pipeTransport": { 31 | "pipeProgram": "/bin/bash", 32 | "pipeCwd": "${workspaceRoot}", 33 | "pipeArgs": [ "-c", "./dockerTask.sh startDebugging" ], 34 | "windows": { 35 | "pipeProgram": "${env.windir}\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", 36 | "pipeCwd": "${workspaceRoot}", 37 | "pipeArgs": [ ".\\dockerTask.ps1", "-StartDebugging" ] 38 | } 39 | } 40 | }, 41 | { 42 | "name": ".NET Core Launch (web)", 43 | "type": "coreclr", 44 | "request": "launch", 45 | "preLaunchTask": "build", 46 | "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/MonadicComponents.dll", 47 | "args": [], 48 | "cwd": "${workspaceRoot}", 49 | "stopAtEntry": false, 50 | "internalConsoleOptions": "openOnSessionStart", 51 | "launchBrowser": { 52 | "enabled": true, 53 | "args": "${auto-detect-url}", 54 | "windows": { 55 | "command": "cmd.exe", 56 | "args": "/C start ${auto-detect-url}" 57 | }, 58 | "osx": { 59 | "command": "open" 60 | }, 61 | "linux": { 62 | "command": "xdg-open" 63 | } 64 | }, 65 | "env": { 66 | "ASPNETCORE_ENVIRONMENT": "Development" 67 | }, 68 | "sourceFileMap": { 69 | "/Views": "${workspaceRoot}/Views" 70 | } 71 | }, 72 | { 73 | "name": ".NET Core Attach", 74 | "type": "coreclr", 75 | "request": "attach", 76 | "processId": "${command.pickProcess}" 77 | } 78 | ] 79 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | "dockerfile.*": "dockerfile" 4 | }, 5 | "git.ignoreLimitWarning": true, 6 | "typescript.tsdk": "node_modules\\typescript\\lib" 7 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Giuseppe Maggiore 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /dist/monadic_react.d.ts: -------------------------------------------------------------------------------- 1 | export * from './react_monad/combinators'; 2 | export * from './react_monad/core'; 3 | export * from './react_monad/editable_list'; 4 | export * from './react_monad/forms'; 5 | export * from './react_monad/html'; 6 | export * from './react_monad/list'; 7 | export * from './react_monad/option'; 8 | export * from './react_monad/paginator'; 9 | export * from './react_monad/primitives'; 10 | export * from './react_monad/rich_text'; 11 | export * from './react_monad/router'; 12 | export * from './react_monad/workflow'; 13 | -------------------------------------------------------------------------------- /dist/monadic_react.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function __export(m) { 3 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 4 | } 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | __export(require("./react_monad/combinators")); 7 | __export(require("./react_monad/core")); 8 | __export(require("./react_monad/editable_list")); 9 | __export(require("./react_monad/forms")); 10 | __export(require("./react_monad/html")); 11 | __export(require("./react_monad/list")); 12 | __export(require("./react_monad/option")); 13 | __export(require("./react_monad/paginator")); 14 | __export(require("./react_monad/primitives")); 15 | __export(require("./react_monad/rich_text")); 16 | __export(require("./react_monad/router")); 17 | __export(require("./react_monad/workflow")); 18 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9uYWRpY19yZWFjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9tb25hZGljX3JlYWN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsK0NBQXlDO0FBQ3pDLHdDQUFrQztBQUNsQyxpREFBMkM7QUFDM0MseUNBQW1DO0FBQ25DLHdDQUFrQztBQUNsQyx3Q0FBa0M7QUFDbEMsMENBQW9DO0FBQ3BDLDZDQUF1QztBQUN2Qyw4Q0FBd0M7QUFDeEMsNkNBQXVDO0FBQ3ZDLDBDQUFvQztBQUNwQyw0Q0FBc0MifQ== -------------------------------------------------------------------------------- /dist/react_monad/combinators.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { C, Cont, CmdCommon, Context } from './core'; 3 | export declare type RepeatProps = { 4 | kind: "repeat"; 5 | value: A; 6 | p: (_: A) => C; 7 | } & CmdCommon; 8 | export declare type AllProps = { 9 | kind: "all"; 10 | ps: Array>; 11 | } & CmdCommon>; 12 | export declare type AnyProps = { 13 | kind: "any"; 14 | value: A; 15 | ps: Array<(_: A) => C>; 16 | className: string; 17 | } & CmdCommon; 18 | export declare type NeverProps = { 19 | kind: "never"; 20 | p: C; 21 | } & CmdCommon; 22 | export declare type RetractProps = { 23 | kind: "retract"; 24 | inb: (_: A) => B; 25 | out: (_: A) => (_: B) => A; 26 | p: (_: B) => C; 27 | value: A; 28 | } & CmdCommon; 29 | export declare type DelayProps = { 30 | kind: "delay"; 31 | dt: number; 32 | value: A; 33 | p: (_: A) => C; 34 | } & CmdCommon; 35 | export declare type WaitProps = { 36 | kind: "wait"; 37 | dt: number; 38 | value: A; 39 | p: (_: A) => C; 40 | } & CmdCommon; 41 | export declare type RetryStrategy = "never" | "semi exponential" | { 42 | kind: "retry then show failure"; 43 | times: number; 44 | on_failure: C; 45 | } | { 46 | kind: "never"; 47 | on_failure: C; 48 | }; 49 | export declare type LiftPromiseProps = { 50 | kind: "lift promise"; 51 | p: (_: B) => Promise; 52 | retry_strategy: RetryStrategy; 53 | value: B; 54 | } & CmdCommon; 55 | export declare type SimpleMenuType = "side menu" | { 56 | kind: "tabs"; 57 | max_tabs: number; 58 | }; 59 | export declare let repeat: (key?: string, dbg?: () => string) => (p: (_: A) => C) => (_: A) => C; 60 | export declare let any: (key?: string, className?: string, dbg?: () => string) => (ps: ((_: A) => C)[]) => (_: A) => C; 61 | export declare let never: (p: C, key?: string) => C; 62 | export declare let all: (ps: C[], key?: string, dbg?: () => string) => C; 63 | export declare let retract: (key?: string, dbg?: () => string) => (inb: (_: A) => B, out: (_: A) => (_: B) => A, p: (_: B) => C) => (_: A) => C; 64 | export declare let lift_promise: (p: (_: A) => Promise, retry_strategy: RetryStrategy, key?: string, dbg?: () => string) => (_: A) => C; 65 | export declare let delay: (dt: number, key?: string, dbg?: () => string) => (p: (_: A) => C) => (_: A) => C; 66 | export declare let waiting: (dt: number, key?: string, dbg?: () => string) => (p: (_: A) => C) => (_: A) => C; 67 | export declare let mk_submenu_entry: (label: string, children: MenuEntryValue[]) => MenuEntrySubMenu; 68 | export declare let mk_menu_entry: (v: A) => MenuEntryValue; 69 | export declare type MenuEntryValue = { 70 | kind: "item"; 71 | value: A; 72 | }; 73 | export declare type MenuEntrySubMenu = { 74 | kind: "sub menu"; 75 | label: string; 76 | children: Array>; 77 | }; 78 | export declare type MenuEntry = MenuEntryValue | MenuEntrySubMenu; 79 | export declare let simple_menu: (type: SimpleMenuType, to_string: (_: A) => string, key?: string, dbg?: () => string) => (items: MenuEntry[], p: (_: A) => C, selected_item?: A, selected_sub_menu?: string) => C; 80 | export declare let custom: (key?: string, dbg?: () => string) => (render: (ctxt: () => Context) => (_: Cont) => JSX.Element) => C; 81 | export declare let hide: (f_name: string, f: C) => C; 82 | -------------------------------------------------------------------------------- /dist/react_monad/core.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Route, Url } from './router'; 3 | export declare type CmdCommon = { 4 | cont: Cont; 5 | context: () => Context; 6 | key: string; 7 | debug_info: () => string; 8 | }; 9 | export declare type UnitProps = { 10 | kind: "unit"; 11 | value: A; 12 | } & CmdCommon; 13 | export declare type BindProps = { 14 | kind: "bind"; 15 | once: boolean; 16 | p: C; 17 | k: (_: B) => C; 18 | className: string; 19 | } & CmdCommon; 20 | export declare type MapProps = { 21 | kind: "map"; 22 | p: C; 23 | f: (_: A) => B; 24 | } & CmdCommon; 25 | export declare type FilterProps = { 26 | kind: "filter"; 27 | p: C; 28 | f: (_: A) => boolean; 29 | } & CmdCommon; 30 | export declare type ShouldComponentUpdateProps = { 31 | kind: "should component update"; 32 | p: (_: A) => C; 33 | f: (_: A) => boolean; 34 | v: A; 35 | } & CmdCommon; 36 | export declare type Mode = "edit" | "view"; 37 | export declare type Context = { 38 | logic_frame: number; 39 | force_reload: (callback?: () => void) => C; 40 | current_page: C; 41 | set_page: (x: T, new_page: Route, callback?: () => void) => C; 42 | set_url: (x: T, new_url: Url, callback?: () => void) => C; 43 | push_route: (new_route: Route<{}>, callback?: () => void) => C; 44 | set_routes: (routes: Array>, callback?: () => void) => C; 45 | }; 46 | export declare type Cont = (callback: () => void) => (_: A) => void; 47 | export declare type C = { 48 | comp: (ctxt: () => Context) => (cont: Cont) => JSX.Element; 49 | then: (key: string, k: (_: A) => C, className?: string, dbg?: () => string) => C; 50 | never: (key?: string) => C; 51 | ignore: (key?: string) => C; 52 | ignore_with: (x: B) => C; 53 | map: (f: (_: A) => B, key?: string, dbg?: () => string) => C; 54 | filter: (f: (_: A) => boolean, key?: string, dbg?: () => string) => C; 55 | }; 56 | export declare function make_C(comp: (ctxt: () => Context) => (cont: Cont) => JSX.Element): C; 57 | export declare let unit: (x: A, key?: string, dbg?: () => string) => C; 58 | export declare type JoinProps = { 59 | p: C>; 60 | } & CmdCommon; 61 | export declare type JoinState = { 62 | p_inner: "waiting" | JSX.Element; 63 | p_outer: JSX.Element; 64 | }; 65 | export declare let bind: (key: string, p: C, k: (_: A) => C, className?: string, dbg?: () => string) => C; 66 | export declare let map: (key?: string, dbg?: () => string) => (_: (_: A) => B) => (_: C) => C; 67 | export declare let filter: (key?: string, dbg?: () => string) => (_: (_: A) => boolean) => (_: C) => C; 68 | export declare let should_component_update: (key?: string, dbg?: () => string) => (_: (_: A) => boolean) => (_: (_: A) => C) => (_: A) => C; 69 | export declare type SimpleApplicationProps = { 70 | p: C; 71 | cont: (_: A) => void; 72 | }; 73 | export declare type SimpleApplicationState = { 74 | context: Context; 75 | }; 76 | export declare class SimpleApplication extends React.Component, SimpleApplicationState> { 77 | constructor(props: SimpleApplicationProps, context: any); 78 | context_from_props(props: SimpleApplicationProps, p: C): Context; 79 | render(): JSX.Element; 80 | } 81 | export declare let simple_application: (p: C, cont: (_: A) => void) => JSX.Element; 82 | -------------------------------------------------------------------------------- /dist/react_monad/editable_list.d.ts: -------------------------------------------------------------------------------- 1 | import { List } from "immutable"; 2 | import { C } from '../react_monad/core'; 3 | export declare type EditableListState = { 4 | items: List; 5 | selected_index: undefined | number; 6 | }; 7 | export declare type ListOperation = { 8 | kind: "add"; 9 | value: A; 10 | } | { 11 | kind: "remove"; 12 | value: A; 13 | index: number; 14 | } | { 15 | kind: "toggle"; 16 | value: A; 17 | index: number; 18 | selected: boolean; 19 | }; 20 | export declare let editable_list: (list_name: string, initial_items: C>, create_new_form: (_: EditableListState) => C) => C>; 21 | -------------------------------------------------------------------------------- /dist/react_monad/forms.d.ts: -------------------------------------------------------------------------------- 1 | import * as Immutable from "immutable"; 2 | import { C, Mode } from './core'; 3 | import * as Moment from 'moment'; 4 | export declare type FormErrors = { 5 | errors: Immutable.Map>; 6 | }; 7 | export declare type FormData = { 8 | model: M; 9 | } & FormErrors; 10 | export declare type FormEntry = { 11 | kind: "string"; 12 | field_name: string; 13 | in: (_: M) => string; 14 | out: (_: M) => (_: string) => M; 15 | get_errors: (_: M) => Array; 16 | } | { 17 | kind: "number"; 18 | field_name: string; 19 | in: (_: M) => number; 20 | out: (_: M) => (_: number) => M; 21 | get_errors: (_: M) => Array; 22 | } | { 23 | kind: "date"; 24 | field_name: string; 25 | in: (_: M) => Moment.Moment; 26 | out: (_: M) => (_: Moment.Moment) => M; 27 | get_errors: (_: M) => Array; 28 | } | { 29 | kind: "time"; 30 | field_name: string; 31 | in: (_: M) => Moment.Moment; 32 | out: (_: M) => (_: Moment.Moment) => M; 33 | get_errors: (_: M) => Array; 34 | } | { 35 | kind: "datetime"; 36 | field_name: string; 37 | in: (_: M) => Moment.Moment; 38 | out: (_: M) => (_: Moment.Moment) => M; 39 | get_errors: (_: M) => Array; 40 | } | { 41 | kind: "image"; 42 | field_name: string; 43 | in: (_: M) => string; 44 | out: (_: M) => (_: string) => M; 45 | get_errors: (_: M) => Array; 46 | } | { 47 | kind: "file"; 48 | field_name: string; 49 | filename: (_: M) => string; 50 | url: (_: M) => string; 51 | in: (_: M) => File; 52 | out: (_: M) => (_: File) => M; 53 | get_errors: (_: M) => Array; 54 | } | { 55 | kind: "lazy image"; 56 | field_name: string; 57 | download: (c: M) => C; 58 | upload: (c: M) => (src: string) => C; 59 | } | { 60 | kind: "lazy file"; 61 | field_name: string; 62 | filename: (_: M) => string; 63 | out: (_: M) => (_: File) => M; 64 | url: (_: M) => string; 65 | upload: (_: M) => (_: File) => C; 66 | }; 67 | export declare let simple_inner_form: (mode: Mode, model_name: (_: M) => string, entries: FormEntry[]) => (_: FormData) => C>; 68 | export declare let form_errors: (model_name: (_: M) => string, entries: FormEntry[]) => (fd: FormData) => C>; 69 | export declare let simple_form_with_autosave: (mode: Mode, model_name: (_: M) => string, entries: FormEntry[], download_M: C, upload_M: (_: M) => C) => C; 70 | export declare let simple_form_with_save_button: (mode: Mode, model_name: (_: M) => string, entries: FormEntry[], download_M: C, upload_M: (_: M) => C) => C; 71 | export declare let simple_form_with_prev_and_next_buttons: (mode: Mode, model_name: (_: M) => string, entries: FormEntry[], prev_enabled: (_: FormData) => boolean, next_enabled: (_: FormData) => boolean, prev_visible: (_: FormData) => boolean, next_visible: (_: FormData) => boolean, on_prev: (_: M) => M, on_next: (_: M) => M) => (_: FormData) => C>; 72 | -------------------------------------------------------------------------------- /dist/react_monad/html.d.ts: -------------------------------------------------------------------------------- 1 | import * as Immutable from "immutable"; 2 | import { C, CmdCommon, Mode } from './core'; 3 | export declare type H1Props = { 4 | kind: "h1"; 5 | className: string | undefined; 6 | text: string; 7 | value: A; 8 | p: (_: A) => C; 9 | } & CmdCommon; 10 | export declare type H2Props = { 11 | kind: "h2"; 12 | className: string | undefined; 13 | text: string; 14 | value: A; 15 | p: (_: A) => C; 16 | } & CmdCommon; 17 | export declare type LabelProps = { 18 | kind: "label"; 19 | className: string | undefined; 20 | text: string; 21 | span_before_content: boolean; 22 | value: A; 23 | p: (_: A) => C; 24 | } & CmdCommon; 25 | export declare type DivProps = { 26 | kind: "div"; 27 | className: string | undefined; 28 | value: A; 29 | p: (_: A) => C; 30 | } & CmdCommon; 31 | export declare type FormProps = { 32 | kind: "form"; 33 | className: string | undefined; 34 | value: A; 35 | p: (_: A) => C; 36 | } & CmdCommon; 37 | export declare type MultiSelectorType = "list" | "checkbox"; 38 | export declare type MultiSelectorProps = { 39 | kind: "multi selector"; 40 | type: MultiSelectorType; 41 | to_string: (_: A) => string; 42 | items: Immutable.List; 43 | selected_items: undefined | Immutable.List; 44 | } & CmdCommon>; 45 | export declare type ImageProps = { 46 | kind: "image"; 47 | src: string; 48 | mode: Mode; 49 | } & CmdCommon; 50 | export declare type SelectorType = "dropdown" | "radio"; 51 | export declare type SelectorProps = { 52 | kind: "selector"; 53 | type: SelectorType; 54 | to_string: (_: A) => string; 55 | items: Immutable.List; 56 | selected_item: undefined | A; 57 | } & CmdCommon; 58 | export declare type ButtonProps = { 59 | label: string; 60 | x: A; 61 | disabled: boolean; 62 | className: string; 63 | } & CmdCommon & ({ 64 | kind: "button"; 65 | } | { 66 | kind: "a"; 67 | href: string; 68 | rel?: "nofollow"; 69 | }); 70 | export declare type LinkProps = { 71 | kind: "link"; 72 | label: string; 73 | url: string; 74 | disabled: boolean; 75 | className: string; 76 | } & CmdCommon; 77 | export declare type FileProps = { 78 | kind: "file"; 79 | label: string; 80 | url: string; 81 | mode: Mode; 82 | disabled: boolean; 83 | } & CmdCommon; 84 | export declare function label(text: string, span_before_content?: boolean, className?: string, key?: string, dbg?: () => string): (p: (_: A) => C) => ((_: A) => C); 85 | export declare function h1(text: string, className?: string, key?: string, dbg?: () => string): (p: (_: A) => C) => ((_: A) => C); 86 | export declare function h2(text: string, className?: string, key?: string, dbg?: () => string): (p: (_: A) => C) => ((_: A) => C); 87 | export declare function div(className?: string, key?: string, dbg?: () => string): (p: (_: A) => C) => ((_: A) => C); 88 | export declare function overlay(key?: string, dbg?: () => string): (p: (_: A) => C) => ((_: A) => C); 89 | export declare function form(className?: string, key?: string, dbg?: () => string): (p: (_: A) => C) => ((_: A) => C); 90 | export declare let selector: (type: SelectorType, to_string: (_: A) => string, key?: string, dbg?: () => string) => (items: A[], selected_item?: A) => C; 91 | export declare let multi_selector: (type: MultiSelectorType, to_string: (_: A) => string, key?: string, dbg?: () => string) => (items: A[], selected_items?: A[]) => C; 92 | export declare let image: (mode: Mode, key?: string, dbg?: () => string) => (src: string) => C; 93 | export declare let a: (label: string, href?: string, rel?: "nofollow", disabled?: boolean, key?: string, className?: string, dbg?: () => string) => (x: A) => C; 94 | export declare let button: (label: string, disabled?: boolean, key?: string, className?: string, dbg?: () => string) => (x: A) => C; 95 | export declare let link: (label: string, url: string, disabled?: boolean, key?: string, className?: string, dbg?: () => string) => C; 96 | export declare let file: (mode: Mode, label: string, url: string, disabled?: boolean, key?: string, dbg?: () => string) => C; 97 | -------------------------------------------------------------------------------- /dist/react_monad/list.d.ts: -------------------------------------------------------------------------------- 1 | import * as Immutable from "immutable"; 2 | import { C } from '../react_monad/core'; 3 | export declare let list: (items: Immutable.List, key?: string, className?: string, dbg?: () => string) => (renderer: (index: number) => (_: A) => C) => C; 4 | -------------------------------------------------------------------------------- /dist/react_monad/option.d.ts: -------------------------------------------------------------------------------- 1 | export declare type Methods = { 2 | map: (f: (_: A) => B) => Option; 3 | }; 4 | export declare type Option = ({ 5 | kind: "none"; 6 | } | { 7 | kind: "some"; 8 | value: A; 9 | }) & Methods; 10 | export declare let none: () => Option; 11 | export declare let some: (x: A) => Option; 12 | -------------------------------------------------------------------------------- /dist/react_monad/option.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | exports.none = function () { 4 | return { 5 | kind: "none", 6 | map: function (f) { return map(f)(this); } 7 | }; 8 | }; 9 | exports.some = function (x) { 10 | return { 11 | kind: "some", value: x, 12 | map: function (f) { return map(f)(this); } 13 | }; 14 | }; 15 | var map = function (f) { return function (x) { return x.kind == "none" ? exports.none() : exports.some(f(x.value)); }; }; 16 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3JlYWN0X21vbmFkL29wdGlvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUdXLFFBQUEsSUFBSSxHQUFHO0lBQTRCLE9BQU87UUFDbkQsSUFBSSxFQUFDLE1BQU07UUFDWCxHQUFHLEVBQUMsVUFBNEIsQ0FBVSxJQUFHLE9BQU8sR0FBRyxDQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFBLENBQUMsQ0FBQztLQUFFLENBQUE7QUFDM0UsQ0FBQyxDQUFBO0FBQ1UsUUFBQSxJQUFJLEdBQUcsVUFBWSxDQUFHO0lBQWdCLE9BQU87UUFDdEQsSUFBSSxFQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUMsQ0FBQztRQUNwQixHQUFHLEVBQUMsVUFBNEIsQ0FBVSxJQUFHLE9BQU8sR0FBRyxDQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFBLENBQUMsQ0FBQztLQUFFLENBQUE7QUFBQyxDQUFDLENBQUE7QUFFN0UsSUFBSSxHQUFHLEdBQUcsVUFBYyxDQUFVLElBQWlDLE9BQU8sVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsSUFBSSxJQUFJLE1BQU0sQ0FBQyxDQUFDLENBQUMsWUFBSSxFQUFLLENBQUMsQ0FBQyxDQUFDLFlBQUksQ0FBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQWxELENBQWtELENBQUEsQ0FBQyxDQUFDLENBQUEifQ== -------------------------------------------------------------------------------- /dist/react_monad/paginator.d.ts: -------------------------------------------------------------------------------- 1 | import { C } from '../react_monad/core'; 2 | export declare type Page = { 3 | num_pages: number; 4 | page_index: number; 5 | items: A; 6 | }; 7 | export declare let paginate: (items_per_page: number, get_page: (current_page: number, items_per_page: number) => C>, key?: string, dbg?: () => string) => (renderer: (items: A) => C) => C; 8 | -------------------------------------------------------------------------------- /dist/react_monad/primitives.d.ts: -------------------------------------------------------------------------------- 1 | import * as Moment from 'moment'; 2 | import { C, Mode, CmdCommon } from './core'; 3 | export declare type OptionalParameters = { 4 | disabled?: boolean; 5 | size?: number; 6 | }; 7 | export declare type NumberProps = { 8 | kind: "number"; 9 | value: number; 10 | mode: Mode; 11 | } & CmdCommon; 12 | export declare type StringType = "email" | "tel" | "text" | "url" | "password"; 13 | export declare type StringProps = { 14 | kind: "string"; 15 | value: string; 16 | type: StringType; 17 | mode: Mode; 18 | optional_parameters: OptionalParameters; 19 | } & CmdCommon; 20 | export declare type BooleanStyle = "checkbox" | "fancy toggle" | "plus/minus" | "radio"; 21 | export declare type BoolProps = { 22 | kind: "bool"; 23 | value: boolean; 24 | mode: Mode; 25 | style: BooleanStyle; 26 | } & CmdCommon; 27 | export declare type DateProps = { 28 | kind: "date"; 29 | value: Moment.Moment; 30 | mode: Mode; 31 | } & CmdCommon; 32 | export declare type DateTimeProps = { 33 | kind: "date time"; 34 | value: Moment.Moment; 35 | mode: Mode; 36 | } & CmdCommon; 37 | export declare type TimeProps = { 38 | kind: "time"; 39 | value: Moment.Moment; 40 | mode: Mode; 41 | } & CmdCommon; 42 | export declare let number: (mode: Mode, key?: string, dbg?: () => string) => (value: number) => C; 43 | export declare let string: (mode: Mode, type?: StringType, key?: string, dbg?: () => string, optional_parameters?: OptionalParameters) => (value: string) => C; 44 | export declare let bool: (mode: Mode, style: BooleanStyle, key?: string, dbg?: () => string) => (value: boolean) => C; 45 | export declare let date_time: (mode: Mode, key?: string, dbg?: () => string) => (value: Moment.Moment) => C; 46 | export declare let date: (mode: Mode, key?: string, dbg?: () => string) => (value: Moment.Moment) => C; 47 | export declare let time: (mode: Mode, key?: string, dbg?: () => string) => (value: Moment.Moment) => C; 48 | -------------------------------------------------------------------------------- /dist/react_monad/rich_text.d.ts: -------------------------------------------------------------------------------- 1 | import { C, Mode } from './core'; 2 | export declare type MediaType = 'image' | 'video' | 'youtube' | 'mathblock'; 3 | export declare function rich_text(mode: Mode, key?: string, dbg?: () => string): (_: string) => C; 4 | -------------------------------------------------------------------------------- /dist/react_monad/router.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Immutable from "immutable"; 3 | import * as Option from "./option"; 4 | import { C, Mode, Context } from './core'; 5 | export declare type UrlElement = string | { 6 | kind: "int"; 7 | name: K; 8 | }; 9 | export declare type UrlTemplate = Array>; 10 | export declare let parse_url: (template: UrlElement[]) => (url: string) => Option.Option; 11 | export declare let instantiate_url: (template: UrlElement[]) => (t: T) => string; 12 | export declare type Url = PartialRetraction; 13 | export declare let make_url: (template: UrlElement[]) => PartialRetraction; 14 | export declare let fallback_url: () => PartialRetraction; 15 | export declare type PartialRetraction = { 16 | in: (_: A) => Option.Option; 17 | out: (_: B) => A; 18 | }; 19 | export declare type Route = { 20 | url: Url; 21 | page: (_: A) => C; 22 | }; 23 | export declare type ApplicationProps = { 24 | mode: Mode; 25 | base_url: string; 26 | slug: string; 27 | routes: () => Promise>>; 28 | }; 29 | export declare type ApplicationState = { 30 | kind: "loading routes"; 31 | } | { 32 | kind: "running"; 33 | context: Context; 34 | routes: Immutable.List>; 35 | }; 36 | export declare class Application extends React.Component { 37 | constructor(props: ApplicationProps, context: any); 38 | load(): void; 39 | componentDidMount(): void; 40 | history: Immutable.Stack; 41 | context_from_props(props: ApplicationProps, p: C): Context; 42 | render(): JSX.Element; 43 | } 44 | export declare let application: (mode: Mode, base_url: string, slug: string, routes: () => Promise[]>) => JSX.Element; 45 | export declare let get_context: (key?: string, dbg?: () => string) => C; 46 | export declare let link_to_route: (label: string, x: T, r: Route, key?: string, className?: string) => C; 47 | -------------------------------------------------------------------------------- /dist/react_monad/workflow.d.ts: -------------------------------------------------------------------------------- 1 | import { Map } from "immutable"; 2 | import { C } from '../react_monad/core'; 3 | export declare type WorkflowData = { 4 | model: M; 5 | step: S; 6 | }; 7 | export declare let simple_workflow: (workflow_name: string, steps: Map) => C>>, initial_model: C, initial_step: S) => C; 8 | -------------------------------------------------------------------------------- /dist/react_monad/workflow.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var core_1 = require("../react_monad/core"); 4 | var combinators_1 = require("../react_monad/combinators"); 5 | exports.simple_workflow = function (workflow_name, steps, initial_model, initial_step) { 6 | return initial_model.then(workflow_name + "_initial_binder", function (m) { 7 | return combinators_1.repeat(workflow_name + "_repeater")(function (cd) { 8 | return steps.has(cd.step) ? 9 | steps.get(cd.step)(cd) 10 | : 11 | core_1.unit(cd).filter(function (_) { return false; }); 12 | })({ model: m, step: initial_step }).map(function (c) { return c.model; }); 13 | }); 14 | }; 15 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2Zsb3cuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvcmVhY3RfbW9uYWQvd29ya2Zsb3cudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFLQSw0Q0FBaUQ7QUFHakQsMERBQXlHO0FBSTlGLFFBQUEsZUFBZSxHQUFHLFVBQWMsYUFBb0IsRUFBRSxLQUFxRSxFQUFFLGFBQWtCLEVBQUUsWUFBYztJQUN4SyxPQUFPLGFBQWEsQ0FBQyxJQUFJLENBQUksYUFBYSxvQkFBaUIsRUFBRSxVQUFBLENBQUM7UUFDOUQsT0FBQSxvQkFBTSxDQUF1QixhQUFhLGNBQVcsQ0FBQyxDQUFDLFVBQUEsRUFBRTtZQUN2RCxPQUFBLEtBQUssQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7Z0JBQ2xCLEtBQUssQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQztnQkFDeEIsQ0FBQztvQkFDQyxXQUFJLENBQW9CLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxVQUFBLENBQUMsSUFBSSxPQUFBLEtBQUssRUFBTCxDQUFLLENBQUM7UUFIaEQsQ0FHZ0QsQ0FDakQsQ0FBQyxFQUFFLEtBQUssRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFDLFlBQVksRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFJLFVBQUEsQ0FBQyxJQUFJLE9BQUEsQ0FBQyxDQUFDLEtBQUssRUFBUCxDQUFPLENBQUM7SUFMdkQsQ0FLdUQsQ0FBQyxDQUFBO0FBQzFELENBQUMsQ0FBQSJ9 -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /// 2 | var gulp = require("gulp"); 3 | 4 | // Plugins for CSS compoling 5 | var sass = require('gulp-sass'), 6 | autoprefixer = require('gulp-autoprefixer'), 7 | cleanCSS = require('gulp-clean-css'), 8 | rename = require('gulp-rename'), 9 | mmq = require('gulp-merge-media-queries'); 10 | 11 | gulp.task("default", ['stylesheets', 'fonts', 'mathfonts']); 12 | 13 | // Compile Stylesheets 14 | gulp.task('stylesheets', function() { 15 | return gulp.src('./samples/Client/stylesheets/**/*.scss') 16 | .pipe(sass().on('error', sass.logError)) 17 | .pipe(mmq({log: false})) 18 | .pipe(autoprefixer({browsers: ['> 2%', 'last 2 versions'], cascade: false})) 19 | .pipe(gulp.dest("./samples/wwwroot/css")) 20 | .pipe(rename({ suffix: '.min' })) 21 | .pipe(cleanCSS()) 22 | .pipe(gulp.dest("./samples/wwwroot/css")) 23 | }); 24 | 25 | // Compile fonts 26 | gulp.task('fonts', function() { 27 | return gulp.src('./Client/fonts/**/*') 28 | .pipe(gulp.dest("./samples/wwwroot/fonts")) 29 | }); 30 | 31 | gulp.task('mathfonts', function() { 32 | return gulp.src('./node_modules/katex/dist/fonts/**/*') 33 | .pipe(gulp.dest("./samples/wwwroot/fonts")) 34 | }); 35 | 36 | // Watch Stylesheets 37 | gulp.task('watch', function(callback) { 38 | gulp.watch('./Client/stylesheets/**/*.scss', ['stylesheets', 'fonts']); 39 | }); 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "monadic_react", 3 | "version": "1.1.12", 4 | "description": "A monadic library for easily composing React-based libraries.", 5 | "main": "dist/monadic_react.js", 6 | "typings": "dist/monadic_react.d.ts", 7 | "typescript": { 8 | "definition": "dist/monadic_react.d.ts" 9 | }, 10 | "scripts": { 11 | "pub": "cd src && ../node_modules/.bin/tsc && cd .. && npm publish", 12 | "be": "cd samples && ../node_modules/.bin/nodemon app.js", 13 | "fe": "./node_modules/.bin/webpack -w", 14 | "css": "./node_modules/.bin/gulp" 15 | }, 16 | "dependencies": { 17 | "draft-js": "~0.10.0", 18 | "i18next": "7.1.3", 19 | "immutable": "3.8.1", 20 | "jquery-ujs": "1.2.1", 21 | "katex": "^0.8.1", 22 | "moment": "2.18.1", 23 | "slugify": "1.1.0", 24 | "whatwg-fetch": "2.0.2" 25 | }, 26 | "peerDependencies": { 27 | "react": "^16.0.0", 28 | "react-dom": "^16.0.0" 29 | }, 30 | "devDependencies": { 31 | "@types/draft-js": "^0.10.10", 32 | "@types/i18next": "2.3.35", 33 | "@types/katex": "^0.5.0", 34 | "@types/react": "^16.0.18", 35 | "@types/react-dom": "^16.0.2", 36 | "awesome-typescript-loader": "3.1.2", 37 | "babel-core": "6.22.1", 38 | "babel-loader": "6.2.10", 39 | "babel-plugin-transform-runtime": "6.22.0", 40 | "babel-polyfill": "6.22.0", 41 | "babel-preset-es2015": "6.22.0", 42 | "babel-preset-react": "6.22.0", 43 | "babel-preset-stage-0": "6.22.0", 44 | "babelify": "7.3.0", 45 | "browserify": "14.0.0", 46 | "del": "2.2.0", 47 | "express": "4.15.3", 48 | "gulp": "3.9.1", 49 | "gulp-autoprefixer": "4.0.0", 50 | "gulp-clean-css": "3.2.0", 51 | "gulp-merge-media-queries": "0.2.1", 52 | "gulp-rename": "1.2.2", 53 | "gulp-sass": "3.1.0", 54 | "nodemon": "1.11.0", 55 | "source-map-loader": "0.1.6", 56 | "typescript": "^2.4.2", 57 | "webpack": "2.3.2" 58 | }, 59 | "author": "Giuseppe Maggiore", 60 | "license": "MIT" 61 | } -------------------------------------------------------------------------------- /samples/Client/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function __export(m) { 3 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 4 | } 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | require("babel-polyfill"); 7 | __export(require("./homepage")); 8 | //# sourceMappingURL=app.js.map -------------------------------------------------------------------------------- /samples/Client/app.ts: -------------------------------------------------------------------------------- 1 | import 'babel-polyfill' 2 | export * from './homepage' 3 | -------------------------------------------------------------------------------- /samples/Client/fonts/icomoon/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /samples/Client/fonts/icomoon/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-family: sans-serif; 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 15em; 50 | padding-bottom: 1em; 51 | margin-right: 4em; 52 | margin-bottom: 1em; 53 | float: left; 54 | overflow: hidden; 55 | } 56 | .liga { 57 | width: 80%; 58 | width: calc(100% - 2.5em); 59 | } 60 | .talign-right { 61 | text-align: right; 62 | } 63 | .talign-center { 64 | text-align: center; 65 | } 66 | .bgc1 { 67 | background: #f1f1f1; 68 | } 69 | .fgc1 { 70 | color: #999; 71 | } 72 | .fgc0 { 73 | color: #000; 74 | } 75 | p { 76 | margin-top: 1em; 77 | margin-bottom: 1em; 78 | } 79 | .mvm { 80 | margin-top: .75em; 81 | margin-bottom: .75em; 82 | } 83 | .mtn { 84 | margin-top: 0; 85 | } 86 | .mtl, .mal { 87 | margin-top: 1.5em; 88 | } 89 | .mbl, .mal { 90 | margin-bottom: 1.5em; 91 | } 92 | .mal, .mhl { 93 | margin-left: 1.5em; 94 | margin-right: 1.5em; 95 | } 96 | .mhmm { 97 | margin-left: 1em; 98 | margin-right: 1em; 99 | } 100 | .mls { 101 | margin-left: .25em; 102 | } 103 | .ptl { 104 | padding-top: 1.5em; 105 | } 106 | .pbs, .pvs { 107 | padding-bottom: .25em; 108 | } 109 | .pvs, .pts { 110 | padding-top: .25em; 111 | } 112 | .unit { 113 | float: left; 114 | } 115 | .unitRight { 116 | float: right; 117 | } 118 | .size1of2 { 119 | width: 50%; 120 | } 121 | .size1of1 { 122 | width: 100%; 123 | } 124 | .clearfix:before, .clearfix:after { 125 | content: " "; 126 | display: table; 127 | } 128 | .clearfix:after { 129 | clear: both; 130 | } 131 | .hidden-true { 132 | display: none; 133 | } 134 | .textbox0 { 135 | width: 3em; 136 | background: #f1f1f1; 137 | padding: .25em .5em; 138 | line-height: 1.5; 139 | height: 1.5em; 140 | } 141 | #testDrive { 142 | display: block; 143 | padding-top: 24px; 144 | line-height: 1.5; 145 | } 146 | .fs0 { 147 | font-size: 16px; 148 | } 149 | .fs1 { 150 | font-size: 32px; 151 | } 152 | .fs2 { 153 | font-size: 20px; 154 | } 155 | 156 | -------------------------------------------------------------------------------- /samples/Client/fonts/icomoon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/fonts/icomoon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /samples/Client/fonts/icomoon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/fonts/icomoon/fonts/icomoon.woff -------------------------------------------------------------------------------- /samples/Client/fonts/icomoon/variables.scss: -------------------------------------------------------------------------------- 1 | $icomoon-font-path: "fonts" !default; 2 | 3 | $icon-code: "\e937"; 4 | $icon-eye: "\e936"; 5 | $icon-minus: "\e935"; 6 | $icon-warning: "\e904"; 7 | $icon-users: "\e906"; 8 | $icon-user: "\e907"; 9 | $icon-upload: "\e908"; 10 | $icon-underline: "\e90a"; 11 | $icon-text-size: "\e90b"; 12 | $icon-sync: "\e90c"; 13 | $icon-text-align-center: "\e90d"; 14 | $icon-text-align-justify: "\e90e"; 15 | $icon-text-align-left: "\e90f"; 16 | $icon-text-align-right: "\e910"; 17 | $icon-text-format-remove: "\e911"; 18 | $icon-sort-alpha-asc: "\e912"; 19 | $icon-printer: "\e913"; 20 | $icon-bold: "\e92d"; 21 | $icon-italic: "\e91c"; 22 | $icon-undo: "\e909"; 23 | $icon-redo: "\e914"; 24 | $icon-pencil: "\e916"; 25 | $icon-map-marker: "\e917"; 26 | $icon-magnifier: "\e918"; 27 | $icon-line-spacing: "\e919"; 28 | $icon-ol: "\e938"; 29 | $icon-list: "\e91a"; 30 | $icon-lock: "\e91b"; 31 | $icon-indent-decrease: "\e91d"; 32 | $icon-indent-increase: "\e91e"; 33 | $icon-heart: "\e91f"; 34 | $icon-home: "\e920"; 35 | $icon-calendar-full: "\e929"; 36 | $icon-alarm: "\e932"; 37 | $icon-camera-video: "\e92a"; 38 | $icon-picture: "\e915"; 39 | $icon-camera: "\e92b"; 40 | $icon-cart: "\e92c"; 41 | $icon-funnel: "\e921"; 42 | $icon-download: "\e922"; 43 | $icon-cross: "\e923"; 44 | $icon-plus: "\e934"; 45 | $icon-crop: "\e924"; 46 | $icon-chevron-down: "\e925"; 47 | $icon-chevron-left: "\e926"; 48 | $icon-chevron-right: "\e927"; 49 | $icon-chevron-up: "\e928"; 50 | $icon-arrow-down: "\e92e"; 51 | $icon-arrow-left: "\e92f"; 52 | $icon-arrow-right: "\e930"; 53 | $icon-arrow-up: "\e931"; 54 | $icon-move: "\e933"; 55 | $icon-fullscreen: "\e905"; 56 | $icon-link: "\e902"; 57 | $icon-unlink: "\e903"; 58 | $icon-trash: "\e901"; 59 | $icon-settings: "\e900"; 60 | $icon-sigma: "\e93c"; 61 | $icon-latex: "\e93c"; 62 | $icon-h1: "\e93a"; 63 | $icon-h2: "\e93b"; 64 | $icon-h3: "\e93d"; 65 | $icon-quote: "\e939"; 66 | 67 | -------------------------------------------------------------------------------- /samples/Client/generated_api.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | let Items = [ 4 | { Id: 1, Name: "TestCourse", Points: 1 }, 5 | { Id: 2, Name: "Course 2", Points: 10 }, 6 | { Id: 3, Name: "Third test", Points: 15 }, 7 | ]; 8 | function get_Course(id) { 9 | let course = Items.filter(x => x.Id == id); 10 | return Promise.resolve({ 11 | Item: course.length > 0 ? course[0] : null 12 | }); 13 | } 14 | exports.get_Course = get_Course; 15 | function update_Course(c) { 16 | let courseIndex = Items.findIndex(x => x.Id == c.Id); 17 | if (courseIndex != -1) { 18 | Items[courseIndex] = c; 19 | } 20 | return Promise.resolve(null); 21 | } 22 | exports.update_Course = update_Course; 23 | //# sourceMappingURL=generated_api.js.map -------------------------------------------------------------------------------- /samples/Client/generated_api.ts: -------------------------------------------------------------------------------- 1 | import * as Models from "./generated_models" 2 | 3 | let Items = [ 4 | { Id: 1, Name: "TestCourse", Points: 1 }, 5 | { Id: 2, Name: "Course 2", Points: 10 }, 6 | { Id: 3, Name: "Third test", Points: 15 }, 7 | ] 8 | 9 | type CourseItem = { 10 | Item: Models.Course 11 | } 12 | 13 | export function get_Course(id:number):Promise { 14 | let course = Items.filter(x => x.Id == id); 15 | return Promise.resolve({ 16 | Item: course.length > 0 ? course[0] : null 17 | }) 18 | } 19 | 20 | export function update_Course(c:Models.Course):Promise { 21 | let courseIndex = Items.findIndex(x => x.Id == c.Id); 22 | 23 | if(courseIndex != -1) { 24 | Items[courseIndex] = c; 25 | } 26 | return Promise.resolve(null) 27 | } -------------------------------------------------------------------------------- /samples/Client/generated_models.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | //# sourceMappingURL=generated_models.js.map -------------------------------------------------------------------------------- /samples/Client/generated_models.ts: -------------------------------------------------------------------------------- 1 | export type Course = { 2 | Id: number, 3 | Name: string, 4 | Points: number 5 | } -------------------------------------------------------------------------------- /samples/Client/samples/button.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.button_sample = monadic_react_1.repeat(`input number`)(n => monadic_react_1.label("Insert an even number: ", true)(n => monadic_react_1.number("edit", "number")(n))(n))(0).then(`input number bind`, n => monadic_react_1.button(`Send ${n.toString()} further`, n % 2 != 0)(n).filter(n => n % 2 == 0).map(n => `Your selection is ${n.toString()}`).then(`button to string`, s => monadic_react_1.string("view")(s).ignore())); 5 | //# sourceMappingURL=button.js.map -------------------------------------------------------------------------------- /samples/Client/samples/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | type FictionalPage = { title:string, content:string } 12 | 13 | export let button_sample : C = 14 | repeat(`input number`)(n => 15 | label("Insert an even number: ", true)(n => 16 | number("edit", "number")(n))(n))(0).then(`input number bind`, n => 17 | button(`Send ${n.toString()} further`, n % 2 != 0)(n).filter(n => n % 2 == 0).map(n => 18 | `Your selection is ${n.toString()}`).then(`button to string`, s => 19 | string("view")(s).ignore())) 20 | -------------------------------------------------------------------------------- /samples/Client/samples/context.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.context_sample = monadic_react_1.any()([ 5 | _ => monadic_react_1.button(`Force reload`)(null).then(undefined, _ => monadic_react_1.get_context().then(undefined, ctxt => ctxt.force_reload())), 6 | ])(null).then(`context sample`, _ => monadic_react_1.get_context().then(undefined, ctxt => monadic_react_1.string("view")(`Context: ${JSON.stringify(ctxt)}`).ignore())); 7 | //# sourceMappingURL=context.js.map -------------------------------------------------------------------------------- /samples/Client/samples/context.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | export let context_sample : C = 12 | any()([ 13 | _ => button(`Force reload`)(null).then(undefined, _ => 14 | get_context().then(undefined, ctxt => 15 | ctxt.force_reload())), 16 | ])(null).then(`context sample`, _ => 17 | get_context().then(undefined, ctxt => 18 | string("view")(`Context: ${JSON.stringify(ctxt)}`).ignore())) 19 | -------------------------------------------------------------------------------- /samples/Client/samples/delay_wait.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.delay_wait = monadic_react_1.delay(2000)(monadic_react_1.repeat()(monadic_react_1.string('edit', 'text')))("").then('forget', _ => monadic_react_1.unit(null)); 5 | //# sourceMappingURL=delay_wait.js.map -------------------------------------------------------------------------------- /samples/Client/samples/delay_wait.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 7 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 8 | custom, repeat, all, any, lift_promise, retract, delay, waiting, 9 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 10 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 11 | 12 | 13 | let delay_example: C = 14 | repeat('repeat_delay')( 15 | string('edit','text') 16 | )("") 17 | .then('pass-delayed',delay(5000)( 18 | label("This is the last thing you have chosen: ",true,'final delay choice')(string('view','text','delayed-string')) 19 | //s => button(s,false)(s) 20 | ) 21 | ).never('lose_delay') 22 | 23 | let wait_example: C = 24 | any('any_waiting')( 25 | ["A","B","C","D"].map( (s) => 26 | _ => button(s,false,s)(s) 27 | ) 28 | )("") 29 | .then('pass-waited',waiting(5000)( 30 | label("This is the last thing you have chosen: ",true,'final delay choice')(string('view','text','waited-string')) 31 | //s => button(s,false)(s) 32 | ) 33 | ).never('lose_wait') 34 | 35 | export let delay_wait = any()([ 36 | label('Delay:',true,'delay')(_ => delay_example), 37 | label('Wait:',true,'wait')(_ => wait_example) 38 | ])(null) -------------------------------------------------------------------------------- /samples/Client/samples/editable_list.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const immutable_1 = require("immutable"); 4 | const monadic_react_1 = require("../../../src/monadic_react"); 5 | exports.editable_list_sample = monadic_react_1.editable_list(`editable-number-list`, monadic_react_1.unit(immutable_1.Range(1, 5).toList()), s => monadic_react_1.button(`+`)(s.items.max() + 1)).then(`editable number list container`, s => monadic_react_1.string("view")(`The selected item is ${s.items.get(s.selected_index)}`).ignore()); 6 | //# sourceMappingURL=editable_list.js.map -------------------------------------------------------------------------------- /samples/Client/samples/editable_list.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set, Range} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 7 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 8 | custom, repeat, all, any, lift_promise, retract, delay, 9 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 10 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 11 | 12 | export let editable_list_sample : C = 13 | editable_list(`editable-number-list`, unit(Range(1,5).toList()), 14 | s => button(`+`)(s.items.max() + 1)).then(`editable number list container`, s => 15 | string("view")(`The selected item is ${s.items.get(s.selected_index)}`).ignore()) 16 | 17 | 18 | -------------------------------------------------------------------------------- /samples/Client/samples/label.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.label_sample = monadic_react_1.repeat(`input number`)(n => monadic_react_1.label("Insert a number: ", true)(n => monadic_react_1.number("edit", "number")(n))(n))(0).then(`input number bind`, c => monadic_react_1.string("view", "text", "view")(`Your selection is ${c.toString()}`).ignore()); 5 | //# sourceMappingURL=label.js.map -------------------------------------------------------------------------------- /samples/Client/samples/label.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | export let label_sample : C = 12 | repeat(`input number`)(n => 13 | label("Insert a number: ", true)(n => 14 | number("edit", "number")(n))(n))(0).then(`input number bind`, c => 15 | string("view", "text", "view")(`Your selection is ${c.toString()}`).ignore()) 16 | -------------------------------------------------------------------------------- /samples/Client/samples/link.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.link_sample = monadic_react_1.any(`link sample`)([ 5 | _ => monadic_react_1.link(`Google`, "https://www.google.com", false, "google"), 6 | _ => monadic_react_1.link(`Facebook`, "https://www.facebook.com", false, "facebook"), 7 | _ => monadic_react_1.link(`Hoppinger`, "https://www.hoppinger.com", false, "hoppinger") 8 | ])(null); 9 | //# sourceMappingURL=link.js.map -------------------------------------------------------------------------------- /samples/Client/samples/link.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 7 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 8 | custom, repeat, all, any, lift_promise, retract, delay, 9 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 10 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 11 | 12 | export let link_sample : C = 13 | any(`link sample`)([ 14 | _ => link(`Google`, "https://www.google.com", false, "google"), 15 | _ => link(`Facebook`, "https://www.facebook.com", false, "facebook"), 16 | _ => link(`Hoppinger`, "https://www.hoppinger.com", false, "hoppinger") 17 | ])(null) 18 | -------------------------------------------------------------------------------- /samples/Client/samples/list.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const immutable_1 = require("immutable"); 4 | const monadic_react_1 = require("../../../src/monadic_react"); 5 | exports.list_sample = monadic_react_1.list(immutable_1.Range(1, 10).toList(), `list sample`)(i => n => monadic_react_1.string("view", "text", `item-${i}-${n}`)(`This is item ${i}/${n}`).ignore(`ignore-${i}-${n}`)); 6 | //# sourceMappingURL=list.js.map -------------------------------------------------------------------------------- /samples/Client/samples/list.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set, Range} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 7 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 8 | custom, repeat, all, any, lift_promise, retract, delay, 9 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 10 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 11 | 12 | export let list_sample : C = 13 | list(Range(1,10).toList(), `list sample`)( 14 | i => n => string("view", "text", `item-${i}-${n}`)(`This is item ${i}/${n}`).ignore(`ignore-${i}-${n}`) 15 | ) 16 | -------------------------------------------------------------------------------- /samples/Client/samples/menu.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.menu_sample = monadic_react_1.simple_menu("side menu", p => p.title, `fictional pages menu`)([ 5 | { title: "About", content: "This page talks about us" }, 6 | { title: "Content", content: "This page is full of interesting content" } 7 | ].map(s => ({ kind: "item", value: s })), p => monadic_react_1.string("view")(p.content)).ignore(); 8 | //# sourceMappingURL=menu.js.map -------------------------------------------------------------------------------- /samples/Client/samples/menu.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | type FictionalPage = { title:string, content:string } 12 | 13 | export let menu_sample : C = 14 | simple_menu("side menu", p => p.title, `fictional pages menu`)( 15 | [ 16 | { title:"About", content:"This page talks about us"}, 17 | { title:"Content", content:"This page is full of interesting content"} 18 | ].map>(s => ({ kind:"item", value:s})), 19 | p => string("view")(p.content) 20 | ).ignore() 21 | -------------------------------------------------------------------------------- /samples/Client/samples/moments.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const Moment = require("moment"); 4 | const monadic_react_1 = require("../../../src/monadic_react"); 5 | exports.moments_sample = monadic_react_1.repeat()(monadic_react_1.any(`input number`)([ 6 | c => monadic_react_1.repeat()(monadic_react_1.label("Insert a time: ", true)(monadic_react_1.time("edit", "time")))(c).then(`time bind`, c => monadic_react_1.string("view")(`Your selection is ${c.toString()}`)).map(_ => c).filter(_ => false, 'time_filter'), 7 | c => monadic_react_1.repeat()(monadic_react_1.label("Insert a date: ", true)(monadic_react_1.date("edit", "date")))(c).then(`date bind`, c => monadic_react_1.string("view")(`Your selection is ${c.toString()}`)).map(_ => c).filter(_ => false, 'date_filter'), 8 | c => monadic_react_1.repeat()(monadic_react_1.label("Insert a date with time: ", true)(monadic_react_1.date_time("edit", "date-time")))(c).then(`date-time bind`, c => monadic_react_1.string("view")(`Your selection is ${c.toString()}`)).map(_ => c).filter(_ => false, 'date_time_filter') 9 | ]))(Moment(Moment.now())).ignore(); 10 | //# sourceMappingURL=moments.js.map -------------------------------------------------------------------------------- /samples/Client/samples/moments.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from "moment" 6 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 7 | Option, C, Mode, unit, bind, string, number, bool, button, time, date, date_time, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 8 | custom, repeat, all, any, lift_promise, retract, delay, 9 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 10 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 11 | 12 | export let moments_sample : C = 13 | repeat()( 14 | any(`input number`)([ 15 | c => repeat()( 16 | label("Insert a time: ", true)(time("edit", "time")) 17 | )(c).then(`time bind`, c => 18 | string("view")(`Your selection is ${c.toString()}`)).map(_ => c).filter(_ => false, 'time_filter'), 19 | 20 | c => repeat()( 21 | label("Insert a date: ", true)(date("edit", "date")) 22 | )(c).then(`date bind`, c => 23 | string("view")(`Your selection is ${c.toString()}`)).map(_ => c).filter(_ => false, 'date_filter'), 24 | 25 | c => repeat()( 26 | label("Insert a date with time: ", true)(date_time("edit", "date-time")) 27 | )(c).then(`date-time bind`, c => 28 | string("view")(`Your selection is ${c.toString()}`)).map(_ => c).filter(_ => false, 'date_time_filter') 29 | ]))(Moment(Moment.now())).ignore() 30 | -------------------------------------------------------------------------------- /samples/Client/samples/multiselector.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.multiselector_sample = monadic_react_1.multi_selector("checkbox", x => x.toString())([1, 3, 5], [1, 5]).then(`multi_selector`, n => monadic_react_1.string("view")(JSON.stringify(n)).ignore()); 5 | //# sourceMappingURL=multiselector.js.map -------------------------------------------------------------------------------- /samples/Client/samples/multiselector.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | export let multiselector_sample : C = 12 | multi_selector("checkbox",x => x.toString())([1, 3, 5], [1, 5]).then(`multi_selector`, n => 13 | string("view")(JSON.stringify(n)).ignore()) 14 | -------------------------------------------------------------------------------- /samples/Client/samples/overlay.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.overlay_sample = monadic_react_1.repeat(`overlay sample`)(visible => monadic_react_1.any()([ 5 | monadic_react_1.any()([ 6 | _ => monadic_react_1.string("view")("The overlay is hidden").never(), 7 | _ => monadic_react_1.button("Show overlay")(true) 8 | ]), 9 | !visible ? 10 | _ => monadic_react_1.unit(null).never() 11 | : 12 | monadic_react_1.overlay()(monadic_react_1.any()([ 13 | _ => monadic_react_1.string("view")("This is the overlay").never(), 14 | _ => monadic_react_1.button("X")(false) 15 | ])) 16 | ])(null))(false).ignore(); 17 | //# sourceMappingURL=overlay.js.map -------------------------------------------------------------------------------- /samples/Client/samples/overlay.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 7 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 8 | custom, repeat, all, any, lift_promise, retract, delay, 9 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 10 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 11 | 12 | export let overlay_sample = 13 | repeat(`overlay sample`)( 14 | visible => 15 | any()( 16 | [ 17 | any()([ 18 | _ => string("view")("The overlay is hidden").never(), 19 | _ => button("Show overlay")(true) 20 | ]), 21 | !visible ? 22 | _ => unit(null).never() 23 | : 24 | overlay()( 25 | any()([ 26 | _ => string("view")("This is the overlay").never(), 27 | _ => button("X")(false) 28 | ]) 29 | ) 30 | ] 31 | )(null) 32 | )(false).ignore() 33 | -------------------------------------------------------------------------------- /samples/Client/samples/pagination.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.pagination_sample = monadic_react_1.div(undefined, `pagination sample`)(_ => monadic_react_1.paginate(10, (cp, ipp) => monadic_react_1.unit(({ num_pages: 10, page_index: cp, items: cp })), `pagination sample`)(n => monadic_react_1.string("view")(`The current page is ${n + 1}`).ignore()))(null); 5 | //# sourceMappingURL=pagination.js.map -------------------------------------------------------------------------------- /samples/Client/samples/pagination.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set, Range} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 7 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 8 | custom, repeat, all, any, lift_promise, retract, delay, 9 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 10 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 11 | 12 | export let pagination_sample : C = 13 | div(undefined, `pagination sample`)(_ => 14 | paginate(10, (cp:number, ipp:number) => 15 | unit>(({ num_pages:10, page_index:cp, items:cp })), `pagination sample`)( 16 | n => string("view")(`The current page is ${n+1}`).ignore() 17 | ))(null) 18 | -------------------------------------------------------------------------------- /samples/Client/samples/promise_sample.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.promise_sample = monadic_react_1.repeat(`input number`)(n => monadic_react_1.label("Insert an even number: ", true)(n => monadic_react_1.number("edit", "number")(n))(n))(0).then(`input number bind`, n => monadic_react_1.button(`Send ${n.toString()} further`, false, "button_key")(n).then("key", (n) => monadic_react_1.lift_promise(getResponse, 5 | // "never", 6 | { kind: "retry then show failure", times: 3, on_failure: monadic_react_1.string("view")("99999").map(a => undefined) }, "new promise", undefined)(n) 7 | .then("response_offer", (r) => { 8 | console.log("then in response"); 9 | return monadic_react_1.unit((n + 5) * 5); 10 | })) 11 | .map(n => `Your selection is ${n.toString()}`) 12 | .then(`button to string`, s => monadic_react_1.string("view")(s).ignore())); 13 | const getResponse = (request) => { 14 | console.log("getResponse"); 15 | return new Promise((resolve, reject) => { 16 | setTimeout(function () { 17 | console.log('Request'); 18 | //resolve(); 19 | reject(); 20 | }, 1000); 21 | }); 22 | }; 23 | //# sourceMappingURL=promise_sample.js.map -------------------------------------------------------------------------------- /samples/Client/samples/promise_sample.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | type Request = { nReq:number } 12 | type Response = { response: string } 13 | 14 | export let promise_sample: C = repeat(`input number`)(n => 15 | label("Insert an even number: ", true)(n => 16 | number("edit", "number")(n) 17 | )(n) 18 | )(0).then(`input number bind`, n => 19 | button(`Send ${n.toString()} further`, false, "button_key")(n).then("key", 20 | (n:number) => lift_promise (getResponse, 21 | // "never", 22 | {kind: "retry then show failure", times: 3, on_failure: string("view")("99999").map(a => undefined)},"new promise",undefined, 23 | )(n) 24 | .then("response_offer", (r: number) => { 25 | console.log("then in response") 26 | return unit ((n+5)*5); 27 | }) 28 | ) 29 | .map(n => `Your selection is ${n.toString()}`) 30 | .then(`button to string`, s => string("view")(s).ignore()) 31 | ); 32 | 33 | const getResponse = (request: number): Promise =>{ 34 | console.log("getResponse") 35 | return new Promise((resolve, reject) => { 36 | setTimeout(function() { 37 | console.log('Request'); 38 | //resolve(); 39 | reject(); 40 | }, 1000); 41 | });} 42 | -------------------------------------------------------------------------------- /samples/Client/samples/rich text.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.rich_text_sample = monadic_react_1.repeat()(monadic_react_1.rich_text("edit"))('').map(s => s.substr(0, 1000)).then(`rich text sample`, monadic_react_1.delay(2000, `rich text delayer`)(monadic_react_1.label(`Raw content:`, true)(monadic_react_1.string("view", "text", "view")))).ignore(); 5 | //# sourceMappingURL=rich text.js.map -------------------------------------------------------------------------------- /samples/Client/samples/rich text.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | export let rich_text_sample: C = 12 | repeat()(rich_text("edit"))('').map(s => s.substr(0, 1000)).then(`rich text sample`, 13 | delay(2000, `rich text delayer`)( 14 | label(`Raw content:`, true)( 15 | string("view", "text", "view")))).ignore() 16 | -------------------------------------------------------------------------------- /samples/Client/samples/selector_and_custom_class.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const React = require("react"); 4 | const monadic_react_1 = require("../../../src/monadic_react"); 5 | class Counter extends React.Component { 6 | constructor(props, context) { 7 | super(props, context); 8 | this.state = { current: 0, signals_sent: 0 }; 9 | } 10 | render() { 11 | return React.createElement("div", null, 12 | React.createElement("label", { style: { margin: "10px" } }, 13 | "Progress: ", 14 | this.state.current, 15 | "/", 16 | this.props.target), 17 | React.createElement("button", { onClick: () => this.setState(Object.assign({}, this.state, { current: this.state.current + 1 }), () => this.state.current >= this.props.target + 1 && this.setState(Object.assign({}, this.state, { current: 0, signals_sent: this.state.signals_sent + 1 }), () => this.props.cont(() => { })(this.state.signals_sent))) }, "+1")); 18 | } 19 | } 20 | exports.selector_sample = monadic_react_1.selector("dropdown", x => x.toString())([1, 3, 5]).then(`target_selector`, n => monadic_react_1.custom()(ctxt => cont => React.createElement(Counter, { target: n, context: ctxt, cont: cont })).then(`counter`, s => monadic_react_1.string("view")(`The component has ticked ${s} times.`).ignore())); 21 | //# sourceMappingURL=selector_and_custom_class.js.map -------------------------------------------------------------------------------- /samples/Client/samples/selector_and_custom_class.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, Context, Cont, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | type CounterProps = { target:number, context:()=>Context, cont:Cont } 12 | type CounterState = { current:number, signals_sent:number } 13 | class Counter extends React.Component { 14 | constructor(props:CounterProps, context:any) { 15 | super(props, context) 16 | 17 | this.state = { current:0, signals_sent:0 } 18 | } 19 | 20 | render() { 21 | return
22 | 23 | 26 |
27 | } 28 | } 29 | 30 | export let selector_sample : C = 31 | selector("dropdown", x => x.toString())([1, 3, 5]).then(`target_selector`, n => 32 | custom()(ctxt => cont => ).then(`counter`, s => 33 | string("view", )(`The component has ticked ${s} times.`).ignore())) 34 | -------------------------------------------------------------------------------- /samples/Client/samples/tabbed menu.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const immutable_1 = require("immutable"); 4 | const monadic_react_1 = require("../../../src/monadic_react"); 5 | exports.tabbed_menu_sample = monadic_react_1.simple_menu({ kind: "tabs", max_tabs: 5 }, p => p.title, `tabbed menu`)(immutable_1.Range(1, 10).map(i => ({ title: `Tab ${i}`, content: `This is the content of the tab ${i}.` })).map(s => ({ kind: "item", value: s })).toArray(), p => monadic_react_1.string("view")(p.content)).ignore(); 6 | //# sourceMappingURL=tabbed menu.js.map -------------------------------------------------------------------------------- /samples/Client/samples/tabbed menu.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set, Range} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | type FictionalPage = { title:string, content:string } 12 | 13 | export let tabbed_menu_sample : C = 14 | simple_menu({kind:"tabs",max_tabs:5}, p => p.title, `tabbed menu`)( 15 | Range(1, 10).map(i => 16 | ({ title:`Tab ${i}`, content:`This is the content of the tab ${i}.`}) 17 | ).map>(s => ({ kind:"item", value:s})).toArray(), 18 | p => string("view")(p.content) 19 | ).ignore() 20 | -------------------------------------------------------------------------------- /samples/Client/samples/toggles.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const monadic_react_1 = require("../../../src/monadic_react"); 4 | exports.toggles_sample = monadic_react_1.repeat()(b => monadic_react_1.any(`toggles`)([ 5 | monadic_react_1.label("my toggle.")(b => monadic_react_1.bool("edit", "checkbox", `basic toggle`)(b)), 6 | monadic_react_1.label("my fancy toggle.")(b => monadic_react_1.bool("edit", "fancy toggle", `fancy toggle`)(b)), 7 | monadic_react_1.label("The last toggle: ")(b => monadic_react_1.bool("edit", "plus/minus", `a plus/minus toggle.`)(b)), 8 | ])(b))(true).then(`fancy_toggle_bind`, c => monadic_react_1.string("view")(`Your selection is ${c.toString()}`).ignore()); 9 | //# sourceMappingURL=toggles.js.map -------------------------------------------------------------------------------- /samples/Client/samples/toggles.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import {UrlTemplate, application, get_context, Route, Url, make_url, fallback_url, link_to_route, 6 | Option, C, Mode, unit, bind, string, number, bool, button, selector, multi_selector, label, h1, h2, div, form, image, link, file, overlay, 7 | custom, repeat, all, any, lift_promise, retract, delay, 8 | simple_menu, mk_menu_entry, mk_submenu_entry, MenuEntry, MenuEntryValue, MenuEntrySubMenu, 9 | rich_text, paginate, Page, list, editable_list} from '../../../src/monadic_react' 10 | 11 | export let toggles_sample : C = 12 | repeat()(b => 13 | any(`toggles`)([ 14 | label("my toggle.")(b => 15 | bool("edit", "checkbox", `basic toggle`)(b)), 16 | label("my fancy toggle.")(b => 17 | bool("edit", "fancy toggle", `fancy toggle`)(b)), 18 | label("The last toggle: ")(b => 19 | bool("edit", "plus/minus", `a plus/minus toggle.`)(b)), 20 | ])(b))(true).then(`fancy_toggle_bind`, c => 21 | string("view")(`Your selection is ${c.toString()}`).ignore()) 22 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/global/.gitkeep -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_buttons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Buttons 3 | // ========================================================================== 4 | 5 | button, 6 | input[type="button"], 7 | input[type="reset"], 8 | input[type="submit"] { 9 | appearance: none; 10 | display: inline-block; 11 | position: relative; 12 | border: 1px solid currentColor; 13 | color: $main-color; 14 | letter-spacing: 1px; 15 | padding: 0 20px; 16 | line-height: 40px; 17 | font-weight: 700; 18 | background: transparent; 19 | cursor: pointer; 20 | text-decoration: none; 21 | user-select: none; 22 | vertical-align: middle; 23 | white-space: nowrap; 24 | transition: all 0.35s ease; 25 | 26 | &:hover, 27 | &:focus { 28 | color: $main-color-dark; 29 | border-bottom-color: currentColor; 30 | } 31 | 32 | &:focus { 33 | outline: none; 34 | } 35 | 36 | &:disabled { 37 | cursor: not-allowed; 38 | 39 | &:hover { 40 | 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_core.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Core 3 | // ========================================================================== 4 | 5 | @viewport { 6 | width: device-width; 7 | height: device-height; 8 | } 9 | 10 | // ----- 11 | 12 | *, 13 | *:after, 14 | *:before { 15 | box-sizing: inherit; 16 | } 17 | 18 | // ----- 19 | 20 | html, 21 | body { 22 | height: 100%; 23 | } 24 | 25 | html { 26 | overflow-y: scroll; // Force vertical scrollbar to avoid jumping if navigating from short to long page and vice versa 27 | box-sizing: border-box; 28 | } 29 | 30 | body { 31 | background-color: $bg-base; 32 | color: $black-400; 33 | font-size: $fs-base; 34 | font-family: $ff-base; 35 | line-height: $lh-base; 36 | -webkit-font-smoothing: antialiased; 37 | -moz-osx-font-smoothing: grayscale; 38 | font-size-adjust: auto; 39 | } 40 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_figures.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Figures 3 | // ========================================================================== 4 | 5 | img, 6 | picture { 7 | display: block; 8 | max-width: 100%; 9 | height: auto; 10 | } 11 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_forms.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Forms 3 | // ========================================================================== 4 | 5 | // ========================================================================== 6 | // Base - Forms 7 | // ========================================================================== 8 | 9 | form { 10 | margin: 0 auto; 11 | } 12 | 13 | // ----- 14 | 15 | label { 16 | @include desktop { 17 | margin-bottom: 7px; 18 | } 19 | } 20 | 21 | // ----- 22 | 23 | input, 24 | select, 25 | textarea { 26 | display: block; 27 | } 28 | 29 | input[type="color"], 30 | input[type="date"], 31 | input[type="datetime"], 32 | input[type="datetime-local"], 33 | input[type="email"], 34 | input[type="month"], 35 | input[type="number"], 36 | input[type="password"], 37 | input[type="search"], 38 | input[type="tel"], 39 | input[type="text"], 40 | input[type="time"], 41 | input[type="url"], 42 | input[type="week"], 43 | input:not([type]), 44 | textarea { 45 | border: solid 1px #D2D2D2; 46 | padding: 6px 20px; 47 | appearance: none; 48 | width: 100%; 49 | letter-spacing: 0.5px; 50 | margin-bottom: 6px; 51 | 52 | &:hover, 53 | &:focus { 54 | border-color: #08ABCE; 55 | box-shadow: 0 2px 5px 0 rgba(#000000, .09); 56 | } 57 | 58 | &:focus { 59 | outline: none; 60 | } 61 | 62 | &:disabled { 63 | cursor: not-allowed; 64 | 65 | &:hover { 66 | 67 | } 68 | } 69 | 70 | &::placeholder { 71 | 72 | } 73 | } 74 | 75 | input[type="file"] { 76 | margin: 10px 0 6px 0; 77 | } 78 | 79 | textarea { 80 | resize: vertical; 81 | min-height: 190px; 82 | } 83 | 84 | select { 85 | width: 100%; 86 | 87 | &:hover, 88 | &:focus { 89 | 90 | } 91 | } 92 | 93 | [type="checkbox"], 94 | [type="radio"] { 95 | display: inline; 96 | } 97 | 98 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_links.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Links 3 | // ========================================================================== 4 | 5 | a { 6 | color: $link-color; 7 | text-decoration: none; 8 | transition: all 0.35s ease; 9 | cursor: pointer; 10 | 11 | &:focus { 12 | outline: none; 13 | } 14 | 15 | &:focus, 16 | &:hover { 17 | color: $link-color-hover; 18 | border-bottom-color: transparent; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_lists.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Lists 3 | // ========================================================================== { 4 | 5 | ul, 6 | ol { 7 | list-style-type: none; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | ul { 13 | 14 | } 15 | 16 | ol { 17 | 18 | } 19 | 20 | dl, 21 | dd, 22 | dt { 23 | margin: 0; 24 | } 25 | 26 | dt { 27 | font-size: 12px; 28 | font-weight: bold; 29 | margin-right: 20px; 30 | text-transform: uppercase; 31 | letter-spacing: 1px; 32 | clear: both; 33 | } 34 | 35 | dd { 36 | border-bottom: solid 1px $grey-400; 37 | padding-bottom: 10px; 38 | margin-bottom: 10px; 39 | 40 | &:last-child { 41 | border-bottom: 0; 42 | padding-bottom: 0; 43 | margin-bottom: 0; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_spinners.scss: -------------------------------------------------------------------------------- 1 | .loader { 2 | display: inline-block; 3 | width: 15px; 4 | border: 2px solid $main-color-light; 5 | border-top: 2px solid $main-color; 6 | border-radius: 50%; 7 | animation: spin 2s linear infinite; 8 | } 9 | 10 | @keyframes spin { 11 | 0% { transform: rotate(0deg); } 12 | 100% { transform: rotate(360deg); } 13 | } 14 | 15 | .save-state { 16 | float: right; 17 | position: relative; 18 | right: 5px; 19 | height: 15px; 20 | } 21 | 22 | .saved { 23 | opacity: 0; 24 | transition: opacity 2.0s ease; 25 | } 26 | 27 | .warning { 28 | float: left; 29 | position: relative; 30 | left: 5px; 31 | top: 45px; 32 | height: 15px; 33 | } 34 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_tables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Tables 3 | // ========================================================================== 4 | 5 | table { 6 | border-collapse: collapse; 7 | table-layout: fixed; 8 | width: 100%; 9 | } 10 | 11 | // ----- 12 | 13 | tr, 14 | td, 15 | th { 16 | vertical-align: middle; 17 | } 18 | 19 | td, 20 | th { 21 | 22 | } 23 | 24 | th { 25 | text-align: left; 26 | } 27 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/global/_typography.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // GLOBAL | Typography 3 | // ========================================================================== 4 | 5 | h1, 6 | h2, 7 | h3, 8 | h4, 9 | h5, 10 | h6 { 11 | font-size: 2rem; 12 | line-height: 1.5; 13 | margin: 0; 14 | letter-spacing: 1px; 15 | } 16 | 17 | h1 { 18 | font-family: $ff-h1; 19 | color: #000000; 20 | @include mobile-tablet { 21 | font-size: $fs-h1*.7; 22 | padding-top: 20px; 23 | padding-bottom: 10px; 24 | } 25 | @include desktop { 26 | font-size: $fs-h1; 27 | padding-top: 40px; 28 | padding-bottom: 42px; 29 | } 30 | } 31 | 32 | h2 { 33 | font-weight: 700; 34 | @include mobile-tablet { 35 | font-size: $fs-h2*.7; 36 | } 37 | @include desktop { 38 | font-size: $fs-h2; 39 | } 40 | } 41 | 42 | h3 { 43 | @include mobile-tablet { 44 | font-size: $fs-h3*.7; 45 | } 46 | @include desktop { 47 | font-size: $fs-h3; 48 | } 49 | } 50 | 51 | h4 { 52 | 53 | } 54 | 55 | h5 { 56 | 57 | } 58 | 59 | h6 { 60 | 61 | } 62 | 63 | // ----- 64 | 65 | p { 66 | margin: 0; 67 | } 68 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/objects/.gitkeep -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | .breadcrumbs__item { 2 | display: inline-block; 3 | position: relative; 4 | margin-right: 30px; 5 | color: #fff; 6 | 7 | &:after { 8 | content: '»'; 9 | display: inline-block; 10 | position: absolute; 11 | right: -19px; 12 | top: 0; 13 | } 14 | 15 | &:last-child { 16 | &:after { 17 | content: none; 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_buttons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Buttons 3 | // ========================================================================== 4 | 5 | .button { 6 | @extend button; 7 | 8 | &--inline { 9 | float: left; 10 | margin-right: 5px; 11 | } 12 | } 13 | 14 | .button--primary { 15 | background: $main-color; 16 | color: #fff; 17 | &:hover { 18 | background: #fff; 19 | color: $main-color; 20 | } 21 | } 22 | 23 | .button--light { 24 | color: #08ABCE; 25 | background: #fff; 26 | &:hover { 27 | background: #fff; 28 | color: #06809C; 29 | } 30 | } 31 | 32 | .button__actions-wrapper { 33 | overflow: hidden; 34 | } 35 | 36 | .button__actions { 37 | float: left; 38 | button { 39 | margin: 20px 20px 0 0; 40 | } 41 | } 42 | 43 | .button--close, 44 | .button--delete, 45 | .button--unlink, 46 | .button--existing, 47 | .button--cancel, 48 | .button--fullscreen, 49 | .button--toggle { 50 | font-size: 0; 51 | padding: 0; 52 | height: 47px; 53 | line-height: 47px; 54 | margin-left: 20px; 55 | overflow: hidden; 56 | text-align: center; 57 | font-weight: normal; 58 | border: none; 59 | &:before { 60 | font-family: 'icomoon'; 61 | font-size: 20px; 62 | width: 100%; 63 | display: block; 64 | } 65 | } 66 | 67 | .button--close { 68 | &:before { 69 | content: $icon-cross; 70 | } 71 | } 72 | 73 | .button--existing { 74 | &:before { 75 | content: $icon-link; 76 | } 77 | } 78 | 79 | .button--unlink { 80 | &:before { 81 | content: $icon-unlink; 82 | } 83 | } 84 | 85 | .button--delete { 86 | &:before { 87 | content: $icon-trash; 88 | } 89 | } 90 | 91 | .button--cancel { 92 | &:before { 93 | content: $icon-cross; 94 | } 95 | } 96 | 97 | .button--fullscreen { 98 | &:before { 99 | content: $icon-fullscreen; 100 | } 101 | } 102 | 103 | .button--toggle { 104 | background: $button--toggle-bg; 105 | color: #fff; 106 | padding: 0 10px; 107 | &:hover { 108 | color: #fff; 109 | } 110 | 111 | &:before { 112 | content: $icon-plus; 113 | } 114 | 115 | &--open { 116 | &:before { 117 | content: $icon-minus; 118 | } 119 | } 120 | } 121 | 122 | .button--search { 123 | height: 42px; 124 | line-height: 42px; 125 | margin-left: 20px; 126 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_cards.scss: -------------------------------------------------------------------------------- 1 | .cards { 2 | justify-content: space-between; 3 | flex-wrap: wrap; 4 | display: flex; 5 | .model-nested__title { 6 | width: 100%; 7 | } 8 | @include tablet-desktop { 9 | &:after { 10 | content: ''; 11 | width: calc(33.3333% - 20px); 12 | } 13 | } 14 | } 15 | 16 | .card { 17 | background: #fff; 18 | padding-bottom: 25px; 19 | .control { 20 | right: 12px; 21 | } 22 | @include tablet-desktop { 23 | width: calc(33.3333% - 20px); 24 | margin-bottom: 20px; 25 | label { 26 | margin-bottom: 0; 27 | } 28 | .model-content { 29 | padding-left: 25px; 30 | padding-right: 25px; 31 | } 32 | .model__attribute { 33 | display: block; 34 | margin-right: 0; 35 | } 36 | .model__attribute label + .model__attribute-content, 37 | .model__attribute label { 38 | width: 100%; 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_column-view.scss: -------------------------------------------------------------------------------- 1 | .column-view-menu { 2 | @include tablet-desktop { 3 | width: 300px; 4 | position: fixed; 5 | top: $topbar-height; 6 | left: $width-sidebar-desktop; 7 | bottom: 0; 8 | background: #fff; 9 | overflow-y: auto; 10 | .model-nested { 11 | border-bottom: 1px solid #D2D2D2; 12 | } 13 | } 14 | .attribute-label { 15 | display: none; 16 | } 17 | .model-preview { 18 | padding: 0; 19 | font-size: inherit; 20 | } 21 | .model__attribute { 22 | margin: 0; 23 | } 24 | .content .model-content { 25 | padding: 21px 50px; 26 | min-height: auto; 27 | } 28 | } 29 | 30 | .column-view-content { 31 | @include tablet-desktop { 32 | margin-left: 250px; 33 | padding: 20px 0 20px 50px; 34 | .local-menu { 35 | margin-top: 0; 36 | } 37 | .content .model-content { 38 | padding-left: 0; 39 | padding-right: 0; 40 | .model-content { 41 | padding: 5px 50px 25px 50px; 42 | } 43 | } 44 | } 45 | } 46 | 47 | .column-view-menu__item { 48 | color: $black-400; 49 | border-right: 5px solid transparent; 50 | display: block; 51 | } 52 | 53 | .column-view-menu__item--selected { 54 | border-right-color: currentColor; 55 | color: $menu-link-color-active; 56 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_controls.scss: -------------------------------------------------------------------------------- 1 | .control { 2 | @include clearfix(); 3 | position: absolute; 4 | right: 0; 5 | display: flex; 6 | 7 | .button--toggle { 8 | order: 10; 9 | } 10 | 11 | &__button { 12 | border: 1px solid $grey-400; 13 | margin-left: 5px; 14 | } 15 | } 16 | 17 | .control__toggle { 18 | float: right; 19 | background: #464E54; 20 | position: relative; 21 | &:before, 22 | &:after { 23 | content: ''; 24 | width: 12px; 25 | height: 2px; 26 | border-radius: 1px; 27 | background: #fff; 28 | display: inline-block; 29 | position: absolute; 30 | top: 50%; 31 | left: 50%; 32 | line-height: 1; 33 | margin-left: -6px; 34 | } 35 | &:before { 36 | transform: rotate(-90deg); 37 | transition: all .3s; 38 | } 39 | @include mobile-tablet { 40 | width: 30px; 41 | height: 45px; 42 | } 43 | @include desktop { 44 | width: 50px; 45 | height: 84px; 46 | } 47 | } 48 | 49 | .control__toggle--open { 50 | background: #08ABCE; 51 | &:before { 52 | transform: rotate(0); 53 | } 54 | } 55 | 56 | [class^="control__button"], 57 | [class*=" control__button"] { 58 | float: right; 59 | position: relative; 60 | padding: 0; 61 | background-color: $white-900; 62 | width: 40px; 63 | height: 40px; 64 | color: $main-color; 65 | line-height: 40px; 66 | text-align: center; 67 | z-index: 99; 68 | 69 | &:hover, 70 | &:focus { 71 | background-color: $main-color; 72 | border-color: $main-color; 73 | cursor: pointer; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_core.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Main 3 | // ========================================================================== 4 | 5 | .main { 6 | &__title { 7 | text-transform: uppercase; 8 | letter-spacing: 1px; 9 | text-align: center; 10 | margin-bottom: 20px; 11 | } 12 | 13 | &__actions { 14 | margin-top: 40px; 15 | } 16 | } 17 | 18 | .main__content { 19 | @include tablet-desktop { 20 | margin-top: $topbar-height; 21 | } 22 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_dropdowns.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Dropdown 3 | // ========================================================================== 4 | 5 | .dropdown { 6 | position: relative; 7 | 8 | &__label { 9 | padding: 10px 50px 10px 10px; 10 | } 11 | 12 | &__options { 13 | border: solid 1px $grey-400; 14 | border-top: 0; 15 | } 16 | 17 | &__option { 18 | padding: 10px; 19 | cursor: pointer; 20 | 21 | dd:last-child { 22 | margin-bottom: 0; 23 | } 24 | 25 | &:hover, 26 | &:focus { 27 | background-color: rgba( $main-color, 0.2 ) !important; 28 | 29 | dd { 30 | border-bottom-color: $main-color; 31 | } 32 | } 33 | 34 | &:nth-child(even) { 35 | background-color: $white-800; 36 | } 37 | } 38 | } 39 | 40 | .dropdown-toggle { 41 | position: absolute; 42 | top: 0; 43 | right: 0; 44 | width: 100%; 45 | height: 40px; 46 | border: solid 1px $grey-200; 47 | background-color: transparent; 48 | text-indent: -9999px; 49 | 50 | &:hover, 51 | &:focus { 52 | border-color: $grey-600; 53 | 54 | &:before { 55 | border-color: $grey-600; 56 | } 57 | 58 | &:after { 59 | border-top-color: $grey-600; 60 | } 61 | } 62 | 63 | &.open { 64 | border-color: $grey-400; 65 | 66 | &:before { 67 | border-color: $grey-400; 68 | } 69 | 70 | &:after { 71 | border-top-color: $grey-400; 72 | } 73 | } 74 | 75 | &:before, 76 | &:after { 77 | content: ''; 78 | position: absolute; 79 | top: 0; 80 | right: 0; 81 | } 82 | 83 | &:before { 84 | border-left: solid 1px $grey-200; 85 | width: 40px; 86 | height: 100%; 87 | } 88 | 89 | &:after { 90 | width: 0; 91 | height: 0; 92 | border-style: solid; 93 | border-width: 8px 5px 0 5px; 94 | border-color: $grey-400 transparent transparent transparent; 95 | right: 15px; 96 | top: 50%; 97 | margin-top: -4px; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_footer-sticky.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Core 3 | // ========================================================================== 4 | 5 | .wrap { 6 | display: table; 7 | table-layout: fixed; 8 | width: 100%; 9 | height: 100%; 10 | } 11 | 12 | .main { 13 | display: table-row; 14 | height: 100%; 15 | } 16 | 17 | .footer, 18 | .header { 19 | display: table-row; 20 | height: 1px; 21 | } 22 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_footer.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Footer 3 | // ========================================================================== 4 | 5 | .footer { 6 | &__inner { 7 | padding: $base-spacing; 8 | text-align: center; 9 | font-size: $base-font-size; 10 | @include tablet { 11 | margin-left: $width-sidebar-tablet; 12 | } 13 | @include desktop { 14 | margin-left: $width-sidebar-desktop; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_forms.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | &__actions { 3 | border-top: solid 1px $grey-400; 4 | padding-top: $base-spacing; 5 | max-width: 320px; 6 | margin: $base-spacing auto 0; 7 | text-align: center; 8 | } 9 | 10 | &__action { 11 | margin-bottom: 5px; 12 | } 13 | } 14 | 15 | .form-group { 16 | margin-bottom: 20px; 17 | } 18 | 19 | .attribute-label { 20 | display: block; 21 | font-weight: 700; 22 | color: #8D8D8D; 23 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_header.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Header 3 | // ========================================================================== 4 | 5 | [class^="header__inner"] { 6 | border-bottom: solid 1px $border-color; 7 | text-align: center; 8 | padding: $base-spacing $base-spacing 0; 9 | } 10 | 11 | .header { 12 | &__inner { 13 | background-color: $background-color; 14 | 15 | &--sub { 16 | display: none; 17 | background-color: $white-800; 18 | 19 | &.active { 20 | display: block; 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_helpers.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Helpers 3 | // ========================================================================== 4 | 5 | .hide { 6 | display: none; 7 | visibility: hidden; 8 | } 9 | 10 | .sr-text { 11 | @include screen-reader-text; 12 | } 13 | 14 | .cf { 15 | @include clearfix; 16 | } 17 | 18 | .valign-p { 19 | @include valign-parent; 20 | } 21 | 22 | .valign-c { 23 | @include valign-child; 24 | } 25 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_list-styles.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Model List > Cards & Gallery 3 | // ========================================================================== 4 | 5 | .list { 6 | &--cards { 7 | .model__list { 8 | display: flex; 9 | flex-direction: row; 10 | flex-wrap: wrap; 11 | align-items: stretch; 12 | } 13 | 14 | .model__item { 15 | width: calc(25% - 20px); 16 | margin-right: 20px; 17 | 18 | &:nth-child(4n+4) { 19 | margin-right: 0; 20 | } 21 | } 22 | } 23 | 24 | &--gallery { 25 | .model__list { 26 | white-space: nowrap; 27 | width: 100%; 28 | overflow-x: auto; 29 | display: flex; 30 | flex-direction: row; 31 | } 32 | 33 | .model__item { 34 | min-width: 400px; 35 | max-width: 400px; 36 | margin-right: 20px; 37 | 38 | &:last-child { 39 | margin-right: 0; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_local-menu.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // OBJECTS | Local menu 3 | // ========================================================================== 4 | 5 | .local-menu { 6 | margin: 50px 0; 7 | padding-top: 20px; 8 | border-bottom: solid 1px $grey-400; 9 | } 10 | 11 | .local_menu_entry { 12 | display: inline-block; 13 | padding: 10px 15px; 14 | border: solid 1px transparent; 15 | border-bottom-color: $grey-400; 16 | background-color: #f1f1f1; 17 | cursor: pointer; 18 | color: $main-color-dark; 19 | font-size: 12px; 20 | text-transform: uppercase; 21 | letter-spacing: 1px; 22 | margin-right: 10px; 23 | position: relative; 24 | bottom: -1px; 25 | } 26 | 27 | .local_menu_entry--active { 28 | border-color: $grey-400; 29 | border-bottom-color: transparent; 30 | background-color: #f1f1f1; 31 | a { 32 | color: $black-400; 33 | } 34 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_menu.scss: -------------------------------------------------------------------------------- 1 | .logo { 2 | max-width: $logo-width; 3 | display: block; 4 | @include mobile { 5 | margin: 10px auto 0 auto; 6 | } 7 | @include tablet-desktop { 8 | margin: 20px auto; 9 | } 10 | } 11 | 12 | // ========================================================================== 13 | // OBJECTS | Menu 14 | // ========================================================================== 15 | 16 | .menu { 17 | background: $menu-bg; 18 | font-weight: $menu-fw; 19 | font-family: $menu-ff; 20 | @include mobile { 21 | padding-top: 1px; 22 | } 23 | @include tablet { 24 | width: $width-sidebar-tablet; 25 | } 26 | @include desktop { 27 | width: $width-sidebar-desktop; 28 | } 29 | @include tablet-desktop { 30 | position: fixed; 31 | top: 0; 32 | left: 0; 33 | height: 100%; 34 | overflow-y: auto; 35 | } 36 | a { 37 | display: block; 38 | border: none; 39 | color: $menu-link-color; 40 | @include mobile-tablet { 41 | padding: 8px 20px; 42 | } 43 | @include desktop { 44 | padding: 21px 50px; 45 | } 46 | } 47 | a:hover, 48 | .active a { 49 | border-right: 5px solid currentColor; 50 | color: $menu-link-color-active; 51 | } 52 | &__tabs { 53 | margin: 0; 54 | padding: 0 $base-spacing; 55 | } 56 | 57 | &__link { 58 | &.active { 59 | background-color: #fff; 60 | padding-bottom: 15px; 61 | margin-bottom: -1px; // Same as height of border in in header.scss 62 | 63 | &:hover, 64 | &:focus { 65 | background-color: $white-800; 66 | color: $black-400; 67 | } 68 | } 69 | } 70 | + .main__content { 71 | @include tablet { 72 | margin-left: $width-sidebar-tablet; 73 | } 74 | @include desktop { 75 | margin-left: $width-sidebar-desktop; 76 | } 77 | } 78 | } 79 | 80 | .menu_entry { 81 | border-bottom: 1px solid rgba(#333, .5); 82 | } 83 | 84 | .menu_entry--sub { 85 | border: none; 86 | a { 87 | font-size: 14px; 88 | @include desktop { 89 | padding: 10px 50px; 90 | } 91 | } 92 | } 93 | 94 | .toggle-container { 95 | div:last-child { 96 | margin-bottom: 10px; 97 | } 98 | } 99 | 100 | .toggle-button { 101 | &:after { 102 | content: $icon-chevron-down; 103 | font-family: 'icomoon'; 104 | position: absolute; 105 | right: 30px; 106 | } 107 | .toggle-container--toggled & { 108 | &:after { 109 | content: $icon-chevron-up; 110 | } 111 | } 112 | } 113 | 114 | .pages { 115 | border-top: 1px solid rgba(#333, .5); 116 | } 117 | 118 | .active-page { font-weight: bold; } 119 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_new-entity.scss: -------------------------------------------------------------------------------- 1 | .overlay { 2 | position: fixed; 3 | background-color: rgba(50,50,50,0.75); 4 | z-index: 100; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | .overlay--disconnected { 12 | text-align: center; 13 | .overlay__item { 14 | max-width: 750px; 15 | } 16 | } 17 | 18 | .overlay__item { 19 | position: fixed; 20 | z-index: 101; 21 | top: 50%; 22 | left: 50%; 23 | width: 90%; 24 | max-height: 90%; 25 | background: #fff; 26 | border: 1px solid $border-color; 27 | box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25); 28 | padding: 20px; 29 | overflow-y: auto; 30 | transform: translateY(-50%) translateX(-50%); 31 | @include desktop { 32 | padding: 30px 50px; 33 | max-width: 1100px; 34 | } 35 | .model-content { 36 | padding-left: 0; 37 | padding-right: 0; 38 | min-height: auto; 39 | } 40 | .model__attribute { 41 | margin-right: 0; 42 | } 43 | .model__attribute-content { 44 | padding-top: 0; 45 | min-height: auto; 46 | } 47 | .group__item { 48 | padding: 6px 0; 49 | } 50 | .group__button { 51 | top: 0; 52 | margin: 6px 0 0 0 !important; 53 | height: auto; 54 | border: none !important; 55 | } 56 | } 57 | 58 | .overlay__title { 59 | margin-bottom: 20px; 60 | } 61 | 62 | .group { 63 | &__item { 64 | border-bottom: 1px solid $border-color; 65 | padding: ($base-spacing / 2) 0; 66 | position: relative; 67 | 68 | &:last-child { 69 | margin-bottom: $base-spacing; 70 | } 71 | } 72 | 73 | &__title { 74 | margin-right: 50px; 75 | } 76 | 77 | &__button { 78 | position: absolute; 79 | right: 0; 80 | top: 38px; 81 | } 82 | } 83 | 84 | @-webkit-keyframes new { 85 | 0% { background: rgba($main-color, .15); } 86 | 100% { background: #fff; } 87 | } 88 | @-moz-keyframes new { 89 | 0% { background: rgba($main-color, .15); } 90 | 100% { background: #fff; } 91 | } 92 | @-o-keyframes new { 93 | 0% { background: rgba($main-color, .15); } 94 | 100% { background: #fff; } 95 | } 96 | @keyframes new { 97 | 0% { background: rgba($main-color, .15); } 98 | 100% { background: #fff; } 99 | } 100 | 101 | .newly-created { 102 | animation: new 2s; 103 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_searchform.scss: -------------------------------------------------------------------------------- 1 | .searchform { 2 | display: flex; 3 | margin-bottom: 19px; 4 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_switch.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/objects/_switch.scss -------------------------------------------------------------------------------- /samples/Client/stylesheets/objects/_texteditor.scss: -------------------------------------------------------------------------------- 1 | .public-DraftEditor-content[contenteditable="true"] { 2 | border: 1px solid $grey-400; 3 | min-height: 250px; 4 | padding: 10px 15px; 5 | background: #fff; 6 | } 7 | 8 | // TODO: fix this weird classes 9 | .text__editor__menu__bar { 10 | img { 11 | width: 25px; 12 | height: 30px; 13 | } 14 | } 15 | 16 | .text-editor__menu-group { 17 | display: inline-block; 18 | vertical-align: top; 19 | } 20 | 21 | .text-editor__menu-button { 22 | padding: 0 8px; 23 | font-size: 20px; 24 | font-weight: normal; 25 | border: none; 26 | margin-left: 5px; 27 | &:before { 28 | font-family: 'icomoon'; 29 | } 30 | } 31 | 32 | .text-editor__menu-button--bold { 33 | &:before { 34 | content: $icon-bold; 35 | } 36 | } 37 | 38 | .text-editor__menu-button--italic { 39 | &:before { 40 | content: $icon-italic; 41 | } 42 | } 43 | 44 | .text-editor__menu-button--underline { 45 | &:before { 46 | content: $icon-underline; 47 | } 48 | } 49 | 50 | .text-editor__menu-button--underline { 51 | &:before { 52 | content: $icon-underline; 53 | } 54 | } 55 | 56 | .text-editor__menu-button--ul { 57 | &:before { 58 | content: $icon-list; 59 | } 60 | } 61 | 62 | .text-editor__menu-button--ol { 63 | &:before { 64 | content: $icon-ol; 65 | } 66 | } 67 | 68 | .text-editor__menu-button--h1 { 69 | &:before { 70 | content: $icon-h1; 71 | } 72 | } 73 | 74 | .text-editor__menu-button--h2 { 75 | &:before { 76 | content: $icon-h2; 77 | } 78 | } 79 | 80 | .text-editor__menu-button--h3 { 81 | &:before { 82 | content: $icon-h3; 83 | } 84 | } 85 | 86 | .text-editor__menu-button--code { 87 | &:before { 88 | content: $icon-code; 89 | } 90 | } 91 | 92 | .text-editor__menu-button--blockquote { 93 | &:before { 94 | content: $icon-quote; 95 | } 96 | } 97 | 98 | .text-editor__menu-button--image { 99 | &:before { 100 | content: $icon-picture; 101 | } 102 | } 103 | 104 | .text-editor__menu-button--latex { 105 | &:before { 106 | content: $icon-latex; 107 | } 108 | } 109 | 110 | .text-editor__menu-button--link { 111 | &:before { 112 | content: $icon-link; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/overwrites/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/overwrites/.gitkeep -------------------------------------------------------------------------------- /samples/Client/stylesheets/overwrites/_project-specific.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Overwrite default variables here 3 | // This file will never be overwritten 4 | // ========================================================================== 5 | 6 | .component { 7 | background: #fff; 8 | margin: 50px; 9 | padding: 50px; 10 | position: relative; 11 | } -------------------------------------------------------------------------------- /samples/Client/stylesheets/overwrites/_project-variables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Overwrite styling here 3 | // This file will never be overwritten 4 | // ========================================================================== -------------------------------------------------------------------------------- /samples/Client/stylesheets/pages/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/pages/.gitkeep -------------------------------------------------------------------------------- /samples/Client/stylesheets/settings/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/settings/.gitkeep -------------------------------------------------------------------------------- /samples/Client/stylesheets/settings/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: 4 | url('#{$icomoon-font-path}/icomoon.woff') format('woff'), 5 | url('#{$icomoon-font-path}/icomoon.svg#icomoon') format('svg'); 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/site.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Main Stylesheet 3 | // ========================================================================== 4 | 5 | // ========================================================================== 6 | // The SCSS folder is structured using the ITCSS principle (Hoppinger Style): 7 | // - SETTINGS: for variables 8 | // - TOOLS: for mixins/functions 9 | // - VENDOR: for third-party styling 10 | // - GLOBAL: for element styling - no classes or IDs 11 | // - OBJECTS: for shared styling - OOCSS! 12 | // - PAGES: for specific page styling - as less as possible 13 | // - OVERWRITES: for overwriting styles - this is the only place where the `!important` tag is acceptable. 14 | // 15 | // READ MORE: http://csswizardry.net/talks/2014/11/itcss-dafed.pdf 16 | // ========================================================================== 17 | 18 | @charset 'UTF-8'; 19 | 20 | // ========================================================================== 21 | // SETTINGS 22 | // ========================================================================== 23 | 24 | @import 'settings/variables'; 25 | @import 'overwrites/project-variables'; 26 | @import 'settings/fonts'; 27 | 28 | // ========================================================================== 29 | // TOOLS 30 | // ========================================================================== 31 | 32 | @import 'tools/mixins'; 33 | 34 | // ========================================================================== 35 | // VENDOR 36 | // ============================================= ============================= 37 | 38 | @import 'vendor/normalize'; 39 | @import '../../../node_modules/katex/dist/katex'; 40 | 41 | // ========================================================================== 42 | // GLOBAL 43 | // ========================================================================== 44 | 45 | @import 'global/core'; 46 | @import 'global/typography'; 47 | @import 'global/links'; 48 | @import 'global/buttons'; 49 | @import 'global/spinners'; 50 | @import 'global/lists'; 51 | @import 'global/figures'; 52 | @import 'global/forms'; 53 | @import 'global/tables'; 54 | 55 | // ========================================================================== 56 | // Monadic 57 | // ========================================================================== 58 | 59 | @import '../../../stylesheets/site'; 60 | 61 | // ========================================================================== 62 | // OBJECTS 63 | // ========================================================================== 64 | 65 | @import 'objects/helpers'; 66 | 67 | @import 'objects/core'; 68 | @import 'objects/breadcrumbs'; 69 | 70 | @import 'objects/header'; 71 | @import 'objects/menu'; 72 | @import 'objects/local-menu'; 73 | @import 'objects/footer'; 74 | @import 'objects/footer-sticky'; 75 | 76 | @import 'objects/buttons'; 77 | @import 'objects/dropdowns'; 78 | @import 'objects/forms'; 79 | @import 'objects/switch'; 80 | 81 | @import 'objects/models'; 82 | @import 'objects/controls'; 83 | @import 'objects/list-styles'; 84 | @import 'objects/new-entity'; 85 | @import 'objects/texteditor'; 86 | @import 'objects/cards'; 87 | @import 'objects/column-view'; 88 | @import 'objects/searchform'; 89 | 90 | 91 | // ========================================================================== 92 | // PAGES 93 | // ========================================================================== 94 | 95 | // ========================================================================== 96 | // OVERWRITES 97 | // ========================================================================== 98 | 99 | @import 'overwrites/project-specific'; 100 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/tools/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/tools/.gitkeep -------------------------------------------------------------------------------- /samples/Client/stylesheets/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // TOOLS | Mixins 3 | // ========================================================================== 4 | 5 | // Use: @include clearfix; 6 | @mixin clearfix { 7 | &:after { 8 | content: ''; 9 | display: table; 10 | clear: both; 11 | } 12 | } 13 | 14 | // Use: @include valign-parent; 15 | @mixin valign-parent { 16 | display: table; 17 | table-layout: fixed; 18 | border-collapse: collapse; 19 | border-spacing: 0; 20 | width: 100%; 21 | height: 100%; 22 | } 23 | 24 | // Use: @include valign-child; 25 | @mixin valign-child { 26 | display: table-cell; 27 | vertical-align: middle; 28 | width: 100%; 29 | height: 100%; 30 | } 31 | 32 | // Use: @include screen-reader-text; 33 | @mixin screen-reader-text { 34 | clip: rect(1px, 1px, 1px, 1px); 35 | position: absolute !important; 36 | height: 1px; 37 | width: 1px; 38 | overflow: hidden; 39 | 40 | &:focus { 41 | clip: auto !important; 42 | display: block; 43 | width: auto; 44 | height: auto; 45 | left: 5px; 46 | top: 5px; 47 | z-index: 100000; 48 | } 49 | } 50 | 51 | // Responsive screen sizes 52 | @mixin mobile { 53 | @media (max-width: #{$tablet}-1) { 54 | @content; 55 | } 56 | } 57 | 58 | @mixin mobile-tablet { 59 | @media (max-width: #{$desktop}-1) { 60 | @content; 61 | } 62 | } 63 | 64 | @mixin tablet { 65 | @media (min-width: #{$tablet}) and (max-width: #{$desktop}-1) { 66 | @content; 67 | } 68 | } 69 | 70 | @mixin tablet-desktop { 71 | @media (min-width: #{$tablet}) { 72 | @content; 73 | } 74 | } 75 | 76 | @mixin desktop { 77 | @media (min-width: #{$desktop}) { 78 | @content; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /samples/Client/stylesheets/vendor/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/Client/stylesheets/vendor/.gitkeep -------------------------------------------------------------------------------- /samples/README.md: -------------------------------------------------------------------------------- 1 | # Getting started 2 | Setup consists of installing all dependencies with `yarn install` (requires `nodejs` and `yarn`). Alternatively `npm install` will also work. 3 | 4 | ## Compiling 5 | Running the application requires compiling it. To compile the client-side stylesheets, use 6 | 7 | ```npm run stylesheets```. 8 | 9 | ## Running locally 10 | 11 | To run the application, use the watchers. For the server, from the `samples` directory, run 12 | 13 | ```../node_modules/.bin/nodemon app.js``` 14 | 15 | for the client, from the root directory, run 16 | 17 | ```npm run webpack```. 18 | -------------------------------------------------------------------------------- /samples/app.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | 4 | let database = { 5 | courses: ["test", "test2", "testcourse"] 6 | } 7 | 8 | app.use(express.static('wwwroot')) 9 | 10 | app.get("/api/v1/courses", function(req, res) { 11 | res.send(JSON.stringify(database.courses)); 12 | }) 13 | 14 | app.put("/api/v1/course", function(req, res) { 15 | 16 | 17 | res.send(JSON.stringify(database.courses)); 18 | 19 | }) 20 | 21 | 22 | app.get('*', function (req, res) { 23 | let slug = req.params[0] || "" 24 | slug = slug.replace(/^\//, "") 25 | res.sendFile(__dirname + '/index.html') 26 | }) 27 | 28 | 29 | 30 | 31 | app.listen(5000, function () { 32 | }) 33 | 34 | -------------------------------------------------------------------------------- /samples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello React! 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_AMS-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_AMS-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_AMS-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_AMS-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_AMS-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_AMS-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_AMS-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_AMS-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Bold.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Caligraphic-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Bold.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Bold.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Bold.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Bold.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Fraktur-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Fraktur-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Bold.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Bold.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Bold.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Bold.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Italic.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Italic.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Italic.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Italic.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Main-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Main-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-BoldItalic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-BoldItalic.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-BoldItalic.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-BoldItalic.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-BoldItalic.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Italic.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Italic.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Italic.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Italic.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Math-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Math-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Bold.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Bold.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Bold.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Bold.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Italic.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Italic.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Italic.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Italic.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Italic.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_SansSerif-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_SansSerif-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Script-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Script-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Script-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Script-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Script-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Script-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Script-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Script-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size1-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size1-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size1-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size1-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size1-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size1-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size1-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size1-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size2-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size2-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size2-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size2-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size2-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size2-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size2-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size2-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size3-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size3-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size3-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size3-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size3-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size3-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size3-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size3-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size4-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size4-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size4-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size4-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size4-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size4-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Size4-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Size4-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Typewriter-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Typewriter-Regular.eot -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Typewriter-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Typewriter-Regular.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Typewriter-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Typewriter-Regular.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/KaTeX_Typewriter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/KaTeX_Typewriter-Regular.woff2 -------------------------------------------------------------------------------- /samples/wwwroot/fonts/icomoon/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /samples/wwwroot/fonts/icomoon/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-family: sans-serif; 32 | font-size: 1em; 33 | margin: 0; 34 | padding: 0; 35 | border: 0; 36 | } 37 | input { 38 | color: inherit; 39 | line-height: 1.5; 40 | height: 1.5em; 41 | padding: .25em 0; 42 | } 43 | input:focus { 44 | outline: none; 45 | box-shadow: inset 0 -2px #449fdb; 46 | } 47 | .glyph { 48 | font-size: 16px; 49 | width: 15em; 50 | padding-bottom: 1em; 51 | margin-right: 4em; 52 | margin-bottom: 1em; 53 | float: left; 54 | overflow: hidden; 55 | } 56 | .liga { 57 | width: 80%; 58 | width: calc(100% - 2.5em); 59 | } 60 | .talign-right { 61 | text-align: right; 62 | } 63 | .talign-center { 64 | text-align: center; 65 | } 66 | .bgc1 { 67 | background: #f1f1f1; 68 | } 69 | .fgc1 { 70 | color: #999; 71 | } 72 | .fgc0 { 73 | color: #000; 74 | } 75 | p { 76 | margin-top: 1em; 77 | margin-bottom: 1em; 78 | } 79 | .mvm { 80 | margin-top: .75em; 81 | margin-bottom: .75em; 82 | } 83 | .mtn { 84 | margin-top: 0; 85 | } 86 | .mtl, .mal { 87 | margin-top: 1.5em; 88 | } 89 | .mbl, .mal { 90 | margin-bottom: 1.5em; 91 | } 92 | .mal, .mhl { 93 | margin-left: 1.5em; 94 | margin-right: 1.5em; 95 | } 96 | .mhmm { 97 | margin-left: 1em; 98 | margin-right: 1em; 99 | } 100 | .mls { 101 | margin-left: .25em; 102 | } 103 | .ptl { 104 | padding-top: 1.5em; 105 | } 106 | .pbs, .pvs { 107 | padding-bottom: .25em; 108 | } 109 | .pvs, .pts { 110 | padding-top: .25em; 111 | } 112 | .unit { 113 | float: left; 114 | } 115 | .unitRight { 116 | float: right; 117 | } 118 | .size1of2 { 119 | width: 50%; 120 | } 121 | .size1of1 { 122 | width: 100%; 123 | } 124 | .clearfix:before, .clearfix:after { 125 | content: " "; 126 | display: table; 127 | } 128 | .clearfix:after { 129 | clear: both; 130 | } 131 | .hidden-true { 132 | display: none; 133 | } 134 | .textbox0 { 135 | width: 3em; 136 | background: #f1f1f1; 137 | padding: .25em .5em; 138 | line-height: 1.5; 139 | height: 1.5em; 140 | } 141 | #testDrive { 142 | display: block; 143 | padding-top: 24px; 144 | line-height: 1.5; 145 | } 146 | .fs0 { 147 | font-size: 16px; 148 | } 149 | .fs1 { 150 | font-size: 32px; 151 | } 152 | .fs2 { 153 | font-size: 20px; 154 | } 155 | 156 | -------------------------------------------------------------------------------- /samples/wwwroot/fonts/icomoon/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/icomoon/fonts/icomoon.ttf -------------------------------------------------------------------------------- /samples/wwwroot/fonts/icomoon/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/fonts/icomoon/fonts/icomoon.woff -------------------------------------------------------------------------------- /samples/wwwroot/fonts/icomoon/variables.scss: -------------------------------------------------------------------------------- 1 | $icomoon-font-path: "fonts" !default; 2 | 3 | $icon-code: "\e937"; 4 | $icon-eye: "\e936"; 5 | $icon-minus: "\e935"; 6 | $icon-warning: "\e904"; 7 | $icon-users: "\e906"; 8 | $icon-user: "\e907"; 9 | $icon-upload: "\e908"; 10 | $icon-underline: "\e90a"; 11 | $icon-text-size: "\e90b"; 12 | $icon-sync: "\e90c"; 13 | $icon-text-align-center: "\e90d"; 14 | $icon-text-align-justify: "\e90e"; 15 | $icon-text-align-left: "\e90f"; 16 | $icon-text-align-right: "\e910"; 17 | $icon-text-format-remove: "\e911"; 18 | $icon-sort-alpha-asc: "\e912"; 19 | $icon-printer: "\e913"; 20 | $icon-bold: "\e92d"; 21 | $icon-italic: "\e91c"; 22 | $icon-undo: "\e909"; 23 | $icon-redo: "\e914"; 24 | $icon-pencil: "\e916"; 25 | $icon-map-marker: "\e917"; 26 | $icon-magnifier: "\e918"; 27 | $icon-line-spacing: "\e919"; 28 | $icon-ol: "\e938"; 29 | $icon-list: "\e91a"; 30 | $icon-lock: "\e91b"; 31 | $icon-indent-decrease: "\e91d"; 32 | $icon-indent-increase: "\e91e"; 33 | $icon-heart: "\e91f"; 34 | $icon-home: "\e920"; 35 | $icon-calendar-full: "\e929"; 36 | $icon-alarm: "\e932"; 37 | $icon-camera-video: "\e92a"; 38 | $icon-picture: "\e915"; 39 | $icon-camera: "\e92b"; 40 | $icon-cart: "\e92c"; 41 | $icon-funnel: "\e921"; 42 | $icon-download: "\e922"; 43 | $icon-cross: "\e923"; 44 | $icon-plus: "\e934"; 45 | $icon-crop: "\e924"; 46 | $icon-chevron-down: "\e925"; 47 | $icon-chevron-left: "\e926"; 48 | $icon-chevron-right: "\e927"; 49 | $icon-chevron-up: "\e928"; 50 | $icon-arrow-down: "\e92e"; 51 | $icon-arrow-left: "\e92f"; 52 | $icon-arrow-right: "\e930"; 53 | $icon-arrow-up: "\e931"; 54 | $icon-move: "\e933"; 55 | $icon-fullscreen: "\e905"; 56 | $icon-link: "\e902"; 57 | $icon-unlink: "\e903"; 58 | $icon-trash: "\e901"; 59 | $icon-settings: "\e900"; 60 | $icon-sigma: "\e93c"; 61 | $icon-latex: "\e93c"; 62 | $icon-h1: "\e93a"; 63 | $icon-h2: "\e93b"; 64 | $icon-h3: "\e93d"; 65 | $icon-quote: "\e939"; 66 | 67 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/bold-text-option.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/bullets.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 13 | 17 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/italicize-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/numbers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 11 | 13 | 16 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/picture.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/quotes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 13 | 17 | 21 | 23 | 25 | 27 | 29 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /samples/wwwroot/images/draftjs/underline-text-option.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 26 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-danger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-edit.svg: -------------------------------------------------------------------------------- 1 | icon-edit -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-enlarge.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-left.svg: -------------------------------------------------------------------------------- 1 | icon-left -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-menu-down.svg: -------------------------------------------------------------------------------- 1 | icon-menu-down -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-menu-up.svg: -------------------------------------------------------------------------------- 1 | icon-menu-up -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-minus.svg: -------------------------------------------------------------------------------- 1 | icon-minus -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-plus.svg: -------------------------------------------------------------------------------- 1 | icon-plus -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-remove.svg: -------------------------------------------------------------------------------- 1 | icon-remove -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-right.svg: -------------------------------------------------------------------------------- 1 | icon-right -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-scale-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-scale-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-shrink.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-translation-and-localization.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 12 | 21 | 27 | 29 | 32 | 35 | 37 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-unlink.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-user-list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 17 | 19 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /samples/wwwroot/images/icon-view.svg: -------------------------------------------------------------------------------- 1 | icon-view -------------------------------------------------------------------------------- /samples/wwwroot/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hoppinger/MonadicReact/1f846494caff33ccd64b89f59a254f231370c351/samples/wwwroot/images/logo.png -------------------------------------------------------------------------------- /samples/wwwroot/translations.json: -------------------------------------------------------------------------------- 1 | { 2 | "en": { 3 | "translation": { 4 | "HomePage": "Home", 5 | "HomePage_Group1S": "Group1's", 6 | "HomePage_Group2S": "Group2's", 7 | "ItemsPage": "All Items", 8 | "Group1S": "Group1's", 9 | "Group2S": "Group2's", 10 | "Item1S": "Item1's", 11 | "Item2S": "Item2's", 12 | "Item2AS": "Item2A's", 13 | "Item2BS": "Item2B's" 14 | }, 15 | "Item1": { 16 | "Name":{ 17 | "inline": "Item1" 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/monadic_react.ts: -------------------------------------------------------------------------------- 1 | export * from './react_monad/combinators' 2 | export * from './react_monad/core' 3 | export * from './react_monad/editable_list' 4 | export * from './react_monad/forms' 5 | export * from './react_monad/html' 6 | export * from './react_monad/list' 7 | export * from './react_monad/option' 8 | export * from './react_monad/paginator' 9 | export * from './react_monad/primitives' 10 | export * from './react_monad/rich_text' 11 | export * from './react_monad/router' 12 | export * from './react_monad/workflow' 13 | -------------------------------------------------------------------------------- /src/react_monad/editable_list.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set, Range} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {C, unit, bind} from '../react_monad/core' 7 | import {string, number, bool} from '../react_monad/primitives' 8 | import {button, selector, multi_selector, label, h1, h2, div, form, image} from '../react_monad/html' 9 | import {custom, repeat, all, any, lift_promise, retract, delay, simple_menu, hide} from '../react_monad/combinators' 10 | import {rich_text} from '../react_monad/rich_text' 11 | import {paginate, Page} from '../react_monad/paginator' 12 | import {list} from '../react_monad/list' 13 | 14 | export type EditableListState = { items:List, selected_index:undefined|number } 15 | export type ListOperation = { kind:"add", value:A } | { kind:"remove", value:A, index:number } | { kind:"toggle", value:A, index:number, selected:boolean } 16 | let perform = function(s:EditableListState, op:ListOperation) : EditableListState { 17 | return op.kind == "add" ? 18 | {...s, items:s.items.push(op.value) } 19 | : op.kind == "remove" ? 20 | {...s, items:s.items.remove(op.index), selected_index:s.selected_index == op.index ? undefined : op.index > s.selected_index ? s.selected_index : s.selected_index - 1 } 21 | : {...s, selected_index:op.selected ? op.index : s.selected_index == op.index ? undefined : s.selected_index } 22 | } 23 | 24 | export let editable_list = function(list_name:string, initial_items:C>, create_new_form:(_:EditableListState) => C) : C> { 25 | return initial_items.then(list_name, items => 26 | repeat>(`monadic-list ${list_name}`)( 27 | form, EditableListState>(`monadic-list-form`)( 28 | any, EditableListState>()([ 29 | s => list>(s.items, undefined, `monadic-list-items`)(i => n => 30 | any, ListOperation>(`item_${n}`, `monadic-list-item`)([ 31 | div,ListOperation>(`monadic-list-cell`)(_ => 32 | label("")(bool("edit", "radio", "radio-bool"))(s.selected_index == i).then(undefined, selected => 33 | unit>({ kind:"toggle", value:n, index:i, selected:selected }).filter(_ => 34 | selected != (s.selected_index == i)))), 35 | div,ListOperation>(`monadic-list-cell`)(op => 36 | string("view")(`This is item ${n}, with index ${i}`).filter(_ => false).ignore_with(op)), 37 | div,ListOperation>(`monadic-list-cell monadic-list-lastcell`)(_ => 38 | button>(`X`)({ kind:"remove", value:n, index:i })) 39 | ])(undefined) 40 | ).then(`inner list`, op => unit(perform(s,op))), 41 | s => create_new_form(s).then(`monadic-new-list-item`, new_value => unit(perform(s, { kind:"add", value:new_value }))) 42 | ] 43 | )))({ items:items, selected_index:undefined })) 44 | } 45 | -------------------------------------------------------------------------------- /src/react_monad/list.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import * as Immutable from "immutable" 4 | import {C, unit, bind, Mode, make_C, CmdCommon} from '../react_monad/core' 5 | import {string, number, bool} from '../react_monad/primitives' 6 | import {button, selector, multi_selector, label, image} from '../react_monad/html' 7 | import {custom, repeat, any, lift_promise, retract, delay, simple_menu, hide} from '../react_monad/combinators' 8 | import {paginate, Page} from '../react_monad/paginator' 9 | 10 | type ListProps = { 11 | kind:"list", 12 | items:Immutable.List 13 | className:string, 14 | renderer:((index:number) => (_:A) => C) } & CmdCommon 15 | type ListState = { ps:"creating"|Immutable.List } 16 | class List extends React.Component,ListState> { 17 | constructor(props:ListProps,context:any) { 18 | super(props, context) 19 | this.state = { ps:"creating" } 20 | } 21 | componentWillReceiveProps(new_props:ListProps) { 22 | this.setState({...this.state, 23 | ps:new_props.items.map((item, index) => 24 | new_props.renderer(index)(item).comp(new_props.context)(callback => new_value => 25 | new_props.cont(callback)(new_value))).toList()}) 26 | } 27 | componentWillMount() { 28 | this.setState({...this.state, 29 | ps:this.props.items.map((item, index) => 30 | this.props.renderer(index)(item).comp(this.props.context)(callback => new_value => 31 | this.props.cont(callback)(new_value))).toList()}) 32 | } 33 | render() { 34 | return
{ this.state.ps != "creating" ? this.state.ps : [] }
35 | } 36 | } 37 | 38 | export let list = function(items:Immutable.List, key?:string, className?:string, dbg?:() => string) : ((renderer:(index:number) => (_:A)=> C) => C) { 39 | return renderer => make_C(context => cont => 40 | React.createElement>(List, 41 | { kind:"list", 42 | items:items, renderer:renderer, 43 | cont:cont, context:context, key:key, className:className, debug_info:dbg })) 44 | } 45 | -------------------------------------------------------------------------------- /src/react_monad/option.ts: -------------------------------------------------------------------------------- 1 | export type Methods = { map:(f:(_:A)=>B)=>Option } 2 | 3 | export type Option = ({ kind:"none" } | { kind:"some", value:A }) & Methods 4 | export let none = function() : Option { return { 5 | kind:"none", 6 | map:function(this:Option, f:(_:A)=>B){ return map(f)(this) } } 7 | } 8 | export let some = function(x:A) : Option { return { 9 | kind:"some", value:x, 10 | map:function(this:Option, f:(_:A)=>B){ return map(f)(this) } } } 11 | 12 | let map = function(f:(_:A)=>B) : (x:Option) => Option { return x => x.kind == "none" ? none() : some(f(x.value)) } 13 | -------------------------------------------------------------------------------- /src/react_monad/workflow.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import {List, Map, Set} from "immutable" 4 | import * as Immutable from "immutable" 5 | import * as Moment from 'moment' 6 | import {C, unit, bind} from '../react_monad/core' 7 | import {string, number, bool} from '../react_monad/primitives' 8 | import {button, selector, multi_selector, label, image} from '../react_monad/html' 9 | import {custom, repeat, any, lift_promise, retract, delay, simple_menu} from '../react_monad/combinators' 10 | import * as Form from '../react_monad/forms' 11 | 12 | export type WorkflowData = { model:M, step:S } 13 | export let simple_workflow = function(workflow_name:string, steps:Immutable.Map) => C>>, initial_model:C, initial_step:S) : C { 14 | return initial_model.then(`${workflow_name}_initial_binder`, m => 15 | repeat>(`${workflow_name}_repeater`)(cd => 16 | steps.has(cd.step) ? 17 | steps.get(cd.step)(cd) 18 | : 19 | unit>(cd).filter(_ => false) 20 | )({ model: m, step:initial_step }).map(c => c.model)) 21 | } 22 | -------------------------------------------------------------------------------- /src/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | -------------------------------------------------------------------------------- /stylesheets/monadic/_content-menu.scss: -------------------------------------------------------------------------------- 1 | .monadic-content-menu { 2 | @include tablet-desktop { 3 | width: 250px; 4 | } 5 | } 6 | 7 | .monadic-content-with-menu { 8 | @include tablet-desktop { 9 | display: flex; 10 | .monadic-content { 11 | width: calc(100% - 250px); 12 | } 13 | } 14 | } 15 | 16 | .monadic-content-menu__entries { 17 | @include tablet-desktop { 18 | padding-right: 25px; 19 | } 20 | } 21 | 22 | .monadic-content-menu__entry { 23 | background: #efefef; 24 | padding: 5px 25px; 25 | margin-bottom: 1px; 26 | a { 27 | display: block; 28 | } 29 | } 30 | 31 | .monadic-content-menu__entry--active { 32 | background: $main-color; 33 | a { 34 | color: #efefef; 35 | } 36 | } 37 | 38 | .monadic-content-menu__sub-entry { 39 | background: #efefef; 40 | padding: 5px 25px 0px 40px; 41 | font-size: 14px; 42 | margin-bottom: 1px; 43 | a { 44 | display: block; 45 | } 46 | } 47 | 48 | .monadic-content-menu__sub-entry--active { 49 | background: $main-color; 50 | a { 51 | color: #efefef; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /stylesheets/monadic/_input-choices.scss: -------------------------------------------------------------------------------- 1 | .monadic-input-choices { 2 | position: absolute; 3 | left: -9999px; 4 | + span { 5 | cursor: pointer; 6 | position: relative; 7 | display: inline-block; 8 | vertical-align: top; 9 | margin-right: 50px; 10 | } 11 | + span:before, 12 | + span:after { 13 | position: absolute; 14 | transition: all .2s; 15 | } 16 | + span:before { 17 | content: ''; 18 | } 19 | } 20 | 21 | .monadic-input-choices--checkbox, 22 | .monadic-input-choices--radio { 23 | + span { 24 | padding-left: 40px; 25 | } 26 | + span:before, 27 | + span:after { 28 | left: 0; 29 | top: 4px; 30 | width: 20px; 31 | height: 20px; 32 | line-height: 20px; 33 | } 34 | + span:before { 35 | border: 1px solid #DDDDDF; 36 | background: #fff; 37 | border-radius: 2px; 38 | } 39 | + span:after { 40 | font-size: 20px; 41 | opacity: 0; 42 | transform: scale(0); 43 | } 44 | &:checked + span:after { 45 | opacity: 1; 46 | transform: scale(1); 47 | } 48 | &:disabled + span:before, 49 | &:disabled:checked + span:before { 50 | background-color: #f1f1f1; 51 | } 52 | &:disabled:checked + span:after { 53 | color: #999; 54 | } 55 | } 56 | 57 | .monadic-input-choices--checkbox { 58 | + span:after { 59 | content: "\2713 "; 60 | text-align: center; 61 | color: $main_color; 62 | } 63 | } 64 | 65 | .monadic-input-choices--radio { 66 | + span:before { 67 | border-radius: 50%; 68 | } 69 | + span:after { 70 | content: ''; 71 | background: $main_color; 72 | width: 10px; 73 | height: 10px; 74 | border-radius: 50%; 75 | margin: 5px 0 0 5px; 76 | } 77 | } 78 | 79 | .monadic-input-choices--switch{ 80 | + span { 81 | padding-left: 70px; 82 | } 83 | + span:before, 84 | + span:after { 85 | width: 20px; 86 | height: 20px; 87 | display: block; 88 | } 89 | + span:before { 90 | vertical-align: middle; 91 | top: 2px; 92 | left: 0; 93 | width: 55px; 94 | height: 26px; 95 | background-color: #f94b3e; 96 | border-radius: 13px; 97 | padding: 0; 98 | transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); 99 | } 100 | + span:after { 101 | content: ""; 102 | position: absolute; 103 | top: 5px; 104 | left: 2px; 105 | z-index: 1; 106 | width: 20px; 107 | height: 20px; 108 | background-color: #fff; 109 | border-radius: 50%; 110 | transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 111 | } 112 | &:checked + span:before { 113 | background: #32da4e; 114 | } 115 | &:checked + span:after { 116 | left: 33px; 117 | } 118 | &:disabled + span:before, 119 | &:disabled:checked + span:before { 120 | background: #cecece; 121 | } 122 | } 123 | 124 | .monadic-field-error { 125 | box-shadow: 0 0 3px #CC0000 126 | } 127 | -------------------------------------------------------------------------------- /stylesheets/monadic/_playground.scss: -------------------------------------------------------------------------------- 1 | // This file must be revised, fixed, and merged within the proper architecture. 2 | 3 | .monadic-list-items { 4 | display: table; 5 | width: 100%; 6 | table-layout: fixed; 7 | } 8 | 9 | .monadic-list-item { 10 | display: table-row; 11 | } 12 | 13 | .monadic-list-cell { 14 | display: table-cell; 15 | padding: 0 10px; 16 | } 17 | 18 | .monadic-list-firstcell { 19 | text-align: left; 20 | } 21 | 22 | .monadic-list-lastcell { 23 | text-align: right; 24 | } 25 | -------------------------------------------------------------------------------- /stylesheets/monadic/_tabs.scss: -------------------------------------------------------------------------------- 1 | .monadic-tabs__entries { 2 | @include clearfix; 3 | border-bottom: 1px solid $grey-400; 4 | margin-bottom: 25px; 5 | } 6 | 7 | .monadic-tabs__entry { 8 | background: #fff; 9 | border: 1px solid transparent; 10 | margin-right: 1px; 11 | float: left; 12 | position: relative; 13 | 14 | &:after { 15 | content: ''; 16 | position: absolute; 17 | top: 100%; 18 | left: 0; 19 | width: 100%; 20 | height: 2px; 21 | } 22 | 23 | a { 24 | color: inherit !important; 25 | display: block; 26 | padding: 5px 25px; 27 | } 28 | 29 | &:hover { 30 | color: $main-color; 31 | } 32 | } 33 | 34 | .monadic-tabs__entry--active { 35 | border-color: $grey-400; 36 | color: $main-color; 37 | 38 | &:after { 39 | background-color:white; 40 | } 41 | } -------------------------------------------------------------------------------- /stylesheets/monadic/_title-preview.scss: -------------------------------------------------------------------------------- 1 | .monadic-title-preview { 2 | label { 3 | display: flex; 4 | justify-content: space-between; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /stylesheets/site.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Main Stylesheet 3 | // ========================================================================== 4 | 5 | // ========================================================================== 6 | // The SCSS folder is structured using the ITCSS principle (Hoppinger Style): 7 | // - SETTINGS: for variables 8 | // - TOOLS: for mixins/functions 9 | // - VENDOR: for third-party styling 10 | // - GLOBAL: for element styling - no classes or IDs 11 | // - OBJECTS: for shared styling - OOCSS! 12 | // - PAGES: for specific page styling - as less as possible 13 | // - OVERWRITES: for overwriting styles - this is the only place where the `!important` tag is acceptable. 14 | // 15 | // READ MORE: http://csswizardry.net/talks/2014/11/itcss-dafed.pdf 16 | // ========================================================================== 17 | 18 | @charset 'UTF-8'; 19 | 20 | // ========================================================================== 21 | // Monadic 22 | // ========================================================================== 23 | 24 | @import 'monadic/input-choices'; 25 | @import 'monadic/content-menu'; 26 | @import 'monadic/tabs'; 27 | @import 'monadic/title-preview'; 28 | @import 'monadic/playground'; 29 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | ## samples (3 days) 2 | - [ ] login with role selection 3 | - [ ] test in GrandeOmega, then move to scaffolder 4 | - [ ] basic API 5 | - [ ] basic API file dowload/upload 6 | - [ ] API form 7 | - [ ] form with 8 | - [1/3] date, time, date-time 9 | - [ ] images 10 | - [ ] custom field in form 11 | - [ ] rich-text 12 | - [ ] tel, url, email 13 | - [ ] file 14 | - [x] lazy-file 15 | - [ ] all primitives, one per sample (use menu nesting) 16 | - [ ] paginated list of entities 17 | - [ ] all 18 | - [ ] workflow/form with selection from list of other entities 19 | - [ ] form without loading and saving 20 | - [ ] workflow without loading and saving 21 | - [ ] form with list of related entities 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "sourceMap": true, 5 | "noImplicitAny": false, 6 | "module": "commonjs", 7 | "target": "es6", 8 | "jsx": "react" 9 | }, 10 | "include": [ 11 | "/**/*.ts", 12 | "/**/*.tsx" 13 | ], 14 | "exclude": [ 15 | "/**/node_modules/*" 16 | ] 17 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | console.log( __dirname + "/samples/wwwroot/js"); 2 | module.exports = { 3 | entry: "./samples/Client/app.ts", 4 | output: { 5 | filename: "site.js", 6 | path: __dirname + "/samples/wwwroot/js", 7 | libraryTarget: 'var', 8 | library: 'app' 9 | }, 10 | 11 | // Enable sourcemaps for debugging webpack's output. 12 | devtool: "source-map", 13 | 14 | resolve: { 15 | // Add '.ts' and '.tsx' as resolvable extensions. 16 | extensions: [".ts", ".tsx", ".js", ".json"] 17 | }, 18 | 19 | module: { 20 | rules: [ 21 | // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 22 | { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, 23 | 24 | // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 25 | { enforce: "pre", test: /\.js$/, loader: "babel-loader!source-map-loader" } 26 | ] 27 | }, 28 | 29 | // When importing a module whose path matches one of the following, just 30 | // assume a corresponding global variable exists and use that instead. 31 | // This is important because it allows us to avoid bundling all of our 32 | // dependencies, which allows browsers to cache those libraries between builds. 33 | externals: { 34 | } 35 | }; --------------------------------------------------------------------------------