Bullet Toggle Minus

; +} \ No newline at end of file diff --git a/typescript/WebMonitoring/src/client/widgets/Icon.tsx b/typescript/WebMonitoring/src/client/widgets/Icon.tsx new file mode 100644 index 000000000..a40a6bda1 --- /dev/null +++ b/typescript/WebMonitoring/src/client/widgets/Icon.tsx @@ -0,0 +1,87 @@ +import React, {CSSProperties, HTMLAttributes, ReactElement, ReactNode} from "react"; +import {DataElement, isAdmin, isEditor, isFolder, isUser, isViewer} from "../DataModel"; +import {margined} from "../css/Styles"; +import Label from "./Label"; +import {FlexX} from "./Layout"; +import Defaults from "../css/Defaults"; +import {rem, url} from "../css/CssFuncs"; + +const iconStyle : CSSProperties = +{ + ...margined, + backgroundSize : "contain", + width : rem(Defaults.remBaseLength), + resize : "both", + backgroundRepeat: "no-repeat", + alignSelf : "stretch", +} + +// ls -1 | awk -F . '{print "| \"" $1 "\""}' +export type IconType = +| "bullet-toggle-minus" +| "bullet-toggle-plus" +| "cross" +| "exclamation" +| "folder-add" +| "folder-open" +| "folder" +| "house" +| "installation" +| "key" +| "resultset-next" +| "resultset-vertical-next" +| "tick" +| "user-admin" +| "user-editor" +| "user-viewer" +| "warning" + +function backgroundImage(iconName: IconType) : CSSProperties +{ + const iconPath = `/icons/${iconName}.svg` + return {backgroundImage: url(iconPath)} +} + + +export function getIcon(element: DataElement) : IconType +{ + if (isFolder(element)) return "folder" + if (!isUser(element)) return "installation" + if (isViewer(element)) return "user-viewer" + if (isEditor(element)) return "user-editor" + if (isAdmin(element)) return "user-admin" + + return "exclamation" +} + +export function Icon(props : {type: IconType} & HTMLAttributes) : ReactElement +{ + const {type, ...divAttrs} = props + const iconBgImage = backgroundImage(type) + return

+} + +export function IconLabel(props : {icon: IconType, label: string} & HTMLAttributes) : ReactElement +{ + const {icon, label, ...divProps} = props + + return ( + + + {label} + + ) +} + +export function DataElementIconLabel(props : {element: DataElement} & HTMLAttributes) : ReactElement +{ + const {element, ...divProps} = props + + const iconType = getIcon(element); + const label = element.name; + + return IconLabel({icon: iconType, label: label, ...divProps}) +} + + + diff --git a/typescript/WebMonitoring/src/client/widgets/Label.tsx b/typescript/WebMonitoring/src/client/widgets/Label.tsx new file mode 100644 index 000000000..6d3b52cc6 --- /dev/null +++ b/typescript/WebMonitoring/src/client/widgets/Label.tsx @@ -0,0 +1,23 @@ +import React, {CSSProperties} from "react"; +import {padded} from "../css/Styles"; +import Defaults from "../css/Defaults"; +import {rem} from "../css/CssFuncs"; + +const defaultLabelStyle : CSSProperties = +{ + ...padded, + margin: 0, + display: "block", // prevent "Margin Collapse", sigh, https://www.joshwcomeau.com/css/rules-of-margin-collapse/ + lineHeight: rem(Defaults.remBaseLength), // !!!!!, otherwise browser will use "normal" which is ~ fontSize * 1.2 + userSelect: "none", + whiteSpace: "pre-line", // allow /n in text +} + +export default function Label(props: {children: string} & CSSProperties ) +{ + const {children, ...style} = props; + const pStyle = {...defaultLabelStyle, ...style} + + return

{children}

+} + diff --git a/typescript/WebMonitoring/src/client/widgets/LabeledElementList.tsx b/typescript/WebMonitoring/src/client/widgets/LabeledElementList.tsx new file mode 100644 index 000000000..76aa8302d --- /dev/null +++ b/typescript/WebMonitoring/src/client/widgets/LabeledElementList.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import Label from "./Label"; +import {rem} from "../css/CssFuncs"; +import Defaults from "../css/Defaults"; +import Grid from "./Grid"; + +export default function labeledElementList(props: Record) +{ + const list = [] + + for (const entry of Object.entries(props)) + { + const [label, element] = entry; + list.push({label}) + list.push(element) + } + + return {list}; +} \ No newline at end of file diff --git a/typescript/WebMonitoring/src/client/widgets/Layout.tsx b/typescript/WebMonitoring/src/client/widgets/Layout.tsx new file mode 100644 index 000000000..a39b2a137 --- /dev/null +++ b/typescript/WebMonitoring/src/client/widgets/Layout.tsx @@ -0,0 +1,218 @@ +import React, {CSSProperties, HTMLAttributes, ReactElement, ReactNode} from "react"; +import Defaults from "../css/Defaults"; +import {addStyles, rem} from "../css/CssFuncs"; + +type SpacingPrefix = "margin" | "padding" + +export type ChildrenProp = { children: ReactNode | ReactNode[] } +export type ElementChildrenProp = { children: ReactElement | ReactElement[] } + +export type Spacing = +{ + default?: boolean, + all?: number, + vertical?: number, + horizontal?: number, + top?: number, + bottom?: number, + left?: number, + right?: number, +} + +function flex(props: HTMLAttributes, direction: 'column' | 'row') +{ + const flexStyle: CSSProperties = + { + display : 'flex', + flexWrap : 'nowrap', + flexDirection: direction, + } + + return

+} + + +export const FlexY = (props: HTMLAttributes) => flex(props, 'column'); +export const FlexX = (props: HTMLAttributes) => flex(props, 'row'); + + +export function ApplyMargin(props: Spacing & { children: ReactElement} & {style?: CSSProperties}) +{ + const {style, ...rest} = props + + const marginStyle = spacingStyle("margin", rest) + const newStyle : CSSProperties = {...style, ...marginStyle} + + return +} + +export function ApplyPadding(props: Spacing & { children: ReactElement} & {style?: CSSProperties}) +{ + const {style = {}, ...rest} = props + + const paddingStyle = spacingStyle("padding", rest) + const newStyle : CSSProperties = {...style, ...paddingStyle} + + return +} + +export function ApplyStyle(props: CSSProperties & { children: ReactElement}) +{ + const {children, ...style} = props + return {children} +} + + + + +export function Apply(props: HTMLAttributes & { children: ReactElement}) +{ + // style gets a special treatment so it is deep-merged + + const {children: element, style: styleToApply = {}, ...propsToApply} = props + + if (Array.isArray(element)) + { + alert("array") + return <> + } + // return <>{element.map((child) => {child})} + + const {children:elementChildren, style: elementStyle = {}, ...elementProps} = element.props + + const newProps = + { + ...elementProps, + ...propsToApply, + style: + { + ...elementStyle, + ...styleToApply + } + } + + return {elementChildren} +} + + + +export function SpacerX(props: HTMLAttributes & {rem?:number}) +{ + const {rem : spacing = Defaults.remSpacing, style, ...rest} = props + + const divStyle : CSSProperties = + { + ...style, + marginLeft: rem(spacing) + } + + return

; +} + +export function SpacerY(props: HTMLAttributes & {rem?:number}) +{ + const {rem : spacing = Defaults.remSpacing, style, ...rest} = props + + const divStyle : CSSProperties = + { + ...style, + marginTop: rem(spacing) + } + + return

; +} + +export function GreedySpacer(props: CSSProperties) +{ + const style : CSSProperties = + { + ...props, + marginLeft: "auto", + marginTop: "auto", + } + + return

; +} + +export function GreedySpacerX(props: CSSProperties) +{ + const style : CSSProperties = + { + ...props, + marginLeft: "auto" + } + + return

; +} + +export function GreedySpacerY(props: CSSProperties) +{ + const style : CSSProperties = + { + ...props, + marginTop: "auto" + } + + return

; +} + +export function OnHover(props: CSSProperties & ChildrenProp) // TODO: use default, inline +{ + const {children, ...styleOnHover} = props; + + if (styleOnHover.backgroundColor === undefined) + styleOnHover.backgroundColor = Defaults.colorDarken + + const none: CSSProperties = {}; + const [hoverStyle, setHoverStyle] = React.useState(none) + + const onMouseLeave = (_: React.MouseEvent) => setHoverStyle(none); + const onMouseEnter = (_: React.MouseEvent) => setHoverStyle(styleOnHover); + + return ( +

+ {children} +

) +} + +function spacingStyle(prefix: SpacingPrefix, spacing: Spacing): CSSProperties +{ + const {default:_default, all, bottom, horizontal, left, right, top, vertical} = spacing; + + const style: CSSProperties = {} + + if (_default !== undefined || all !== undefined) + { + const a = _default !== undefined ? rem(Defaults.remSpacing) : all + style[`${prefix}Left`] = a + style[`${prefix}Right`] = a + style[`${prefix}Top`] = a + style[`${prefix}Bottom`] = a + } + + if (horizontal !== undefined) + { + const h = rem(horizontal); + style[`${prefix}Left`] = h + style[`${prefix}Right`] = h + } + + if (vertical !== undefined) + { + const v = rem(vertical); + style[`${prefix}Top`] = v + style[`${prefix}Bottom`] = v + } + + if (top !== undefined) style[`${prefix}Top`] = rem(top) + if (bottom !== undefined) style[`${prefix}Bottom`] = rem(bottom) + if (left !== undefined) style[`${prefix}Left`] = rem(left) + if (right !== undefined) style[`${prefix}Right`] = rem(right) + + if (Object.keys(style).length === 0) + style[prefix] = rem(Defaults.remSpacing) + + return style +} diff --git a/typescript/WebMonitoring/src/client/widgets/Select.tsx b/typescript/WebMonitoring/src/client/widgets/Select.tsx new file mode 100644 index 000000000..b6815370e --- /dev/null +++ b/typescript/WebMonitoring/src/client/widgets/Select.tsx @@ -0,0 +1,74 @@ +import React, {ReactElement} from "react"; + +import {Apply, FlexX, FlexY, GreedySpacer, OnHover, SpacerX, SpacerY, ApplyStyle} from "./Layout"; +import Label from "./Label"; +import Defaults from "../css/Defaults"; +import State from "../util/state"; + +export type Option = ReactElement<{ data: T, children: ReactElement }> + +export function Option(props: { data: T, children: ReactElement }) : Option +{ + return React.createElement("_", {data: props.data, children: props.children}) +} + +// TODO: NonEmptyArray? +export function Select(props: { state: State, children: Option[] }) +{ + const {children:options, state} = props; + + const showDropdownList = State.init(false) + + const onDropdownClick = (_: React.MouseEvent) => showDropdownList.set(!showDropdownList.get()) + + const getElement = (o: Option) => o.props.children; + const getValue = (o: Option) => o.props.data; + + let selectedOption = options.find(o => getValue(o) === state.get()) + + if (selectedOption === undefined) + { + selectedOption = options[0] + state.set(getValue(options[0])) + } + + function renderOption(option: Option) + { + const onListElementClicked = (_: React.MouseEvent) => + { + showDropdownList.set(false) + state.set(getValue(option)) + } + + return ( + + {getElement(option)} + + ) ; + } + + const dropDownList = options.map(renderOption) + + return ( +

+ + + + {getElement(selectedOption)} + + {showDropdownList.get() ? "▴" : "▾"} + + + + + + + +

{dropDownList}

+ + +

+ ) +} + + diff --git a/typescript/WebMonitoring/src/client/widgets/TextInput.tsx b/typescript/WebMonitoring/src/client/widgets/TextInput.tsx new file mode 100644 index 000000000..a75e01234 --- /dev/null +++ b/typescript/WebMonitoring/src/client/widgets/TextInput.tsx @@ -0,0 +1,102 @@ +import React, {ChangeEvent, CSSProperties} from "react"; +import {padded} from "../css/Styles"; +import {FlexY} from "./Layout"; +import Defaults from "../css/Defaults"; +import {rem} from "../css/CssFuncs"; +import State from "../util/state"; +import Label from "./Label"; + +const textAreaStyle: CSSProperties = +{ + ...padded, + margin : 0, + borderWidth : 0, + resize : "none", + fontFamily : "inherit", + height : rem(Defaults.remBaseLength), + fontSize : rem(Defaults.remBaseLength), + lineHeight : rem(Defaults.remBaseLength), // !!!!!, otherwise browser will use "normal" which is ~ fontSize * 1.2 + overflowY : "hidden", + whiteSpace : "nowrap" +} + +const readOnlyTextAreaStyle: CSSProperties = +{ + ...textAreaStyle, + backgroundColor: "lightgrey", + userSelect: "none" +}; + +const hiddenTextStyle: CSSProperties = +{ + marginLeft : rem(Defaults.remSpacing * 4), // safety-factor: *4 instead of *2 + height : 0, + color : "transparent" +}; + + +export function TextInput(props: {state: State, autoFocus?: boolean }) +{ + const {state} = props + + if (state.constant) + { + return {state.get()} + } + + const autoFocus = props.autoFocus !== undefined + && props.autoFocus + && !state.constant + + function onChange(e: ChangeEvent) + { + // ignore line breaks (no multiline) + // @ts-ignore + if(e.nativeEvent.inputType === "insertLineBreak") + return; + + state.set(e.target.value); + } + + + return ( + + {state.get()} +

+            </FlexY>
+    )
+}
+
+export function PasswordInput(props: {state: State<string>, autoFocus?: boolean })
+{
+    const {state, autoFocus} = props
+
+    function onChange(e: ChangeEvent<HTMLTextAreaElement>)
+    {
+        // @ts-ignore
+        if(e.nativeEvent.inputType === "insertLineBreak")
+            return;
+
+        state.set(e.target.value);
+    }
+
+    const password = state.get().replace(/./g, '•');
+
+    return (
+        <FlexY>
+            <span style={hiddenTextStyle}>{password}</span>
+            <textarea autoFocus={autoFocus}
+                      spellCheck="false"
+                      style={textAreaStyle}
+                      rows={1}
+                      value={password}
+                      onChange={onChange}/>
+        </FlexY>
+    )
+}
diff --git a/typescript/WebMonitoring/src/client/widgets/Tree.tsx b/typescript/WebMonitoring/src/client/widgets/Tree.tsx
new file mode 100644
index 000000000..c96015b52
--- /dev/null
+++ b/typescript/WebMonitoring/src/client/widgets/Tree.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+export type NodeProps<TNode, TTreeState = Record<string, never>> =
+{
+    readonly node: TNode,
+    readonly children: JSX.Element[],
+    readonly path: TNode[],
+    readonly treeState: TTreeState
+}
+
+export type TreeProps<TNode, TTreeState = Record<string, never>> =
+{
+    readonly node: TNode,
+    readonly treeState: TTreeState,
+    readonly getChildren: (node: TNode) => TNode[],
+    readonly getKey: (node: TNode) => string,
+    readonly renderNode: (props: NodeProps<TNode, TTreeState>) => JSX.Element,
+    readonly parents?: TNode[]
+}
+
+export function Tree<TNode, TTreeState>(props: TreeProps<TNode, TTreeState>): JSX.Element
+{
+    const {node, getChildren, getKey, renderNode, treeState, parents} = props
+
+    const path = parents === undefined
+               ? [node]
+               : [...parents, node]
+
+    const children: JSX.Element[] = getChildren(node)
+                                   .map(c => <Tree {...props}
+                                                    node={c}
+                                                    key={getKey(c)}
+                                                    parents={path}/>)
+
+    return renderNode({children, node, path, treeState})
+}
\ No newline at end of file
diff --git a/typescript/WebMonitoring/src/client/widgets/Vertical.tsx b/typescript/WebMonitoring/src/client/widgets/Vertical.tsx
new file mode 100644
index 000000000..2f5ae0b4c
--- /dev/null
+++ b/typescript/WebMonitoring/src/client/widgets/Vertical.tsx
@@ -0,0 +1,19 @@
+import React, {Children, CSSProperties, HTMLAttributes} from "react";
+import {useDefault} from "../util/utils";
+import Defaults from "../css/Defaults";
+import {addStyles} from "../css/CssFuncs";
+import {ChildrenProp} from "./Layout";
+
+export default function Vertical(props: ChildrenProp & HTMLAttributes<HTMLDivElement>)
+{
+    const nRows = Children.count(props.children)
+
+    const style: CSSProperties =
+    {
+        display: "grid",
+        gridTemplateRows: "max-content ".repeat(nRows).trimRight(),
+        rowGap: useDefault(props?.style?.rowGap, Defaults.spacing),
+    }
+
+    return <div className={"Vertical"} {...addStyles(props, style)}/>;
+}
\ No newline at end of file
diff --git a/typescript/WebMonitoring/src/client/widgets/modals/DialogOkCancel.tsx b/typescript/WebMonitoring/src/client/widgets/modals/DialogOkCancel.tsx
new file mode 100644
index 000000000..76038d373
--- /dev/null
+++ b/typescript/WebMonitoring/src/client/widgets/modals/DialogOkCancel.tsx
@@ -0,0 +1,35 @@
+import Modal from "./Modal";
+import {IconType} from "../Icon";
+import React, {ReactElement} from "react";
+import ErrorLabel from "../ErrorLabel";
+import {rem} from "../../css/CssFuncs";
+import Defaults from "../../css/Defaults";
+import Button from "../Button";
+import Horizontal from "../Horizontal";
+import Vertical from "../Vertical";
+
+export default function DialogOkCancel(props:
+                                   {
+                                       onResponse: (r: "Ok" | "Cancel") => void,
+                                       icon: IconType,
+                                       title: string,
+                                       children: ReactElement,
+                                       error?: string
+                                   })
+{
+    const {onResponse, children, icon, title, error} = props;
+
+    return (
+        <Modal icon={icon} title={title}>
+            <Vertical style={{padding:Defaults.spacing}}>
+                {children}
+                <ErrorLabel error={error}
+                             marginTop={rem(Defaults.remSpacing * 2)}
+                             backgroundColor={Defaults.colorDarken}/>
+            </Vertical>
+            <Horizontal style={{justifyContent: "end", padding:Defaults.spacing}}>
+                <Button label={"Ok"} onClick={_ => onResponse("Ok")}/>
+                <Button label={"Cancel"} onClick={_ => onResponse("Cancel")}/>
+            </Horizontal>
+        </Modal>)
+}
\ No newline at end of file
diff --git a/typescript/WebMonitoring/src/client/widgets/modals/Modal.tsx b/typescript/WebMonitoring/src/client/widgets/modals/Modal.tsx
new file mode 100644
index 000000000..7b3c32b42
--- /dev/null
+++ b/typescript/WebMonitoring/src/client/widgets/modals/Modal.tsx
@@ -0,0 +1,53 @@
+import React, {CSSProperties} from "react";
+import {baseStyle, paddedMargined} from "../../css/Styles";
+import {IconLabel, IconType} from "../Icon";
+import Defaults from "../../css/Defaults";
+import {rem, rgba} from "../../css/CssFuncs";
+import Vertical from "../Vertical";
+
+
+const modalBgStyle : CSSProperties =
+{
+    ...baseStyle,
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    position:"fixed",
+    backgroundColor: rgba(0,0,0,0.5),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+};
+
+export type ContinueOrClose = "continue" | "close"
+export type DialogClose = {closeDialog?: () => void}
+
+const popUpStyle : CSSProperties =
+{
+    ...paddedMargined,
+    backgroundColor: Defaults.colorBright,
+    minWidth: rem(Defaults.remBaseLength*12),
+    boxShadow: `${rem(Defaults.remSpacing/2)} ${rem(Defaults.remSpacing/2)} ${rem(Defaults.remSpacing*2)} ${rem(Defaults.remSpacing/2)} ${rgba(0,0,0,0.3)}`
+};
+
+const titleBarStyle =
+{
+    backgroundColor: Defaults.colorDarkenMore,
+    marginBottom: Defaults.spacing
+};
+
+export default function Modal(props: {icon:IconType, title: string, children: JSX.Element | JSX.Element[]})
+{
+    return(
+        <div style={modalBgStyle}>
+            <Vertical style={popUpStyle}>
+                <IconLabel style={titleBarStyle} icon={props.icon} label={props.title}/>
+                {props.children}
+            </Vertical>
+        </div>
+    )
+}
+
+
+
diff --git a/typescript/WebMonitoring/tsconfig.json b/typescript/WebMonitoring/tsconfig.json
new file mode 100644
index 000000000..786a0f7ff
--- /dev/null
+++ b/typescript/WebMonitoring/tsconfig.json
@@ -0,0 +1,110 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    "incremental": true,                         /* Enable incremental compilation */
+    "target": "es6",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    //"module": "ES6",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "lib": ["DOM","ES6","ES2020"],                                   /* Specify library files to be included in the compilation. */
+    "allowJs": false,                             /* Allow javascript files to be compiled. */
+    // "checkJs": true,                             /* Report errors in .js files. */
+    "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
+    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                           /* Generates corresponding '.map' file. */
+    // "outFile": "./",                             /* Concatenate and emit output to single file. */
+    // "outDir": "./",                              /* Redirect output structure to the directory. */
+    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                           /* Enable project compilation */
+    "tsBuildInfoFile": "./node_modules/tsconfig.tsbuildinfo",                     /* Specify file to store incremental compilation information */
+    "removeComments": true,                      /* Do not emit comments to output. */
+    "noEmit": true,                              /* Do not emit outputs. */
+    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                                 /* Enable all strict type-checking options. */
+    "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true,                    /* Enable strict null checks. */
+    "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
+    "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
+    "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    //"noUnusedLocals": true,                      /* Report errors on unused locals. */
+    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+    "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
+    "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
+    //"noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
+    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                             /* List of folders to include type definitions from. */
+    // "types": [],                                 /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
+  },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["node_modules"]
+}
+
+
+
+
+//{
+//  "compilerOptions": {
+//    "target": "ES6",
+//    "module": "ES6",
+//    "rootDir": "src",
+//    "strict": true,
+//    "noImplicitAny": true,
+//    "strictFunctionTypes": true,
+//    "noImplicitThis": true,
+//    "alwaysStrict": true,
+//    "noImplicitReturns": true,
+//    "noFallthroughCasesInSwitch": true,
+//    "esModuleInterop": true,
+//    "skipLibCheck": true,
+//    "forceConsistentCasingInFileNames": true,
+//    "lib": [
+//      "dom",
+//      "dom.iterable",
+//      "esnext"
+//    ],
+//    "allowJs": true,
+//    "allowSyntheticDefaultImports": true,
+//    "moduleResolution": "node",
+//    "resolveJsonModule": true,
+//    "isolatedModules": true,
+//  },
+//  "include": [
+//    "src/**/*"
+//  ],
+//  "exclude": [
+//    "node_modules"
+//  ]
+//}