@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_ErrorBoundary/TS_ErrorBoundary.scss

@@ -0,0 +1,95 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use "../../styles/declaration/basic" as *;
+
+.ts-error-boundary {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+
+  background: #BABABA;
+
+  .ts-error-boundary__pic {
+    transform: scale(1, 1.3);
+    font: {
+      size: 32px;
+      weight: bold;
+    }
+    color: #616161;
+    text-shadow: #e0e0e0 1px 1px 0;
+  }
+
+  .ts-error-boundary__title {
+    font: {
+      size: 24px;
+      weight: bold;
+    }
+    white-space: pre-wrap;
+    text-align: center;
+    color: #616161;
+    text-shadow: #e0e0e0 1px 1px 0;
+  }
+
+  .ts-error-boundary__error {
+    .ts-error-boundary__error-title {
+      font: {
+        size: 20px;
+        weight: 500;
+      }
+      text-decoration: underline;
+    }
+
+    .ts-error-boundary__error-message {
+      white-space: pre-wrap;
+      font: {
+        size: 18px;
+        weight: 500;
+      }
+    }
+  }
+
+  .ts-error-boundary__button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+    padding: 10px 20px;
+    background: #ED2939;
+    color: white;
+    border-radius: 8px;
+
+    &:hover {
+      background: #D71223;
+    }
+
+    &:active {
+      background: #A40C1A;
+    }
+  }
+
+}

package/components/TS_ErrorBoundary/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_ErrorBoundary.js';

package/components/TS_ErrorBoundary/index.js

@@ -0,0 +1,21 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './TS_ErrorBoundary.js';

package/components/TS_Form/TS_Form.d.ts

@@ -0,0 +1,9 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+export type Props_TSForm<T> = {
+    value: T;
+};
+export type State_TSForm<T> = {};
+export declare class TS_Form<T extends object> extends ComponentSync<Props_TSForm<T>, State_TSForm<T>> {
+    protected deriveStateFromProps(nextProps: Props_TSForm<T>): State_TSForm<T>;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_Form/TS_Form.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+export class TS_Form extends ComponentSync {
+    deriveStateFromProps(nextProps) {
+        const state = this.state ? { ...this.state } : {};
+        return state;
+    }
+    render() {
+        return _jsx("div", {});
+    }
+}

package/components/TS_Form/consts.d.ts

@@ -0,0 +1 @@
+export declare const TS_Form_DefaultRenderers: {};

package/components/TS_Form/consts.js

@@ -0,0 +1 @@
+export const TS_Form_DefaultRenderers = {};

package/components/TS_Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from './consts.js';
+export * from './types.js';
+export * from './TS_Form.js';

package/components/TS_Form/index.js

@@ -0,0 +1,3 @@
+export * from './consts.js';
+export * from './types.js';
+export * from './TS_Form.js';

package/components/TS_Form/types.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ValidatorTypeResolver } from '@nu-art/ts-common';
+export type TS_Form_RendererProps<V, T extends object = any> = {
+    onChange: (value?: V) => void;
+    validator?: ValidatorTypeResolver<V>;
+    value?: V;
+    defaultValue?: V;
+    label?: string;
+};
+export type TS_Form_ItemRenderer<V, T extends object = any> = React.ElementType<TS_Form_RendererProps<V, T>>;
+export type TS_Form_Element<V, T extends object = any> = TS_Form_RendererProps<V, T> & {
+    renderer: TS_Form_ItemRenderer<V, T> | ((props: TS_Form_RendererProps<V, T>, context: T) => TS_Form_ItemRenderer<V, T>);
+};

package/components/TS_Form/types.js

@@ -0,0 +1 @@
+export {};

package/components/TS_GridTableProto/TS_GridTableProto.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import './TS_GridTableProto.scss';
+import { DBProto, ResolvableContent } from '@nu-art/ts-common';
+import { LinearLayoutProps } from '../Layouts/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TemplatingProps_EditableItemController } from '../TS_EditableItemController/index.js';
+import { Editable_SaveAction } from '../../utils/EditableItem.js';
+type Props_TS_GridTableProto<Proto extends DBProto<any>, EditorProps extends object = object> = Omit<LinearLayoutProps, 'autoSave'> & TemplatingProps_EditableItemController<Proto, EditorProps> & {
+    saveAction?: Editable_SaveAction<Proto['uiType']>;
+    items: ResolvableContent<Proto['uiType'][]>;
+    sorter?: (items: Proto['uiType'][]) => Proto['uiType'][];
+    Header?: ResolvableContent<React.ReactNode>;
+};
+type State_TS_GridTable = {};
+export declare class TS_GridTableProto<Proto extends DBProto<any>, EditorProps extends object = object> extends ComponentSync<Props_TS_GridTableProto<Proto, EditorProps>, State_TS_GridTable> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_GridTableProto/TS_GridTableProto.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import './TS_GridTableProto.scss';
+import { resolveContent } from '@nu-art/ts-common';
+import { Grid } from '../Layouts/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import { TS_EditableItemController } from '../TS_EditableItemController/index.js';
+export class TS_GridTableProto extends ComponentSync {
+    render() {
+        const { items, className, sorter, Header, editorProps, createInitialInstance, onError, autoSave, saveAction, module, editor, ...props } = this.props;
+        const resolvedItems = (sorter ?? DefaultSorter)(resolveContent(items));
+        const ItemController = (item, index) => {
+            return _jsx(TS_EditableItemController, { module: module, editor: editor, autoSave: autoSave, editorProps: { ...editorProps, index }, onError: onError, item: item }, item._id);
+        };
+        const NewItemController = createInitialInstance && _jsx(TS_EditableItemController, { module: module, editor: editor, onError: onError, autoSave: autoSave, saveAction: saveAction, onSave: (item) => this.forceUpdate(), editorProps: editorProps, createInitialInstance: createInitialInstance }, `new-${items.length}`);
+        return _jsxs(Grid, { className: _className('ts-grid-table', className), ...props, children: [Header && resolveContent(Header), resolvedItems.map((item, i) => {
+                    return _jsx(Fragment, { children: resolveContent(ItemController, item, i) }, item._id);
+                }), NewItemController && resolveContent(NewItemController, resolvedItems.length)] });
+    }
+}
+const DefaultSorter = (items) => items;

package/components/TS_GridTableProto/TS_GridTableProto.scss

@@ -0,0 +1,4 @@
+
+.t-s--grid-table-proto {
+
+}

package/components/TS_GridTableProto/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_GridTableProto.js';

package/components/TS_GridTableProto/index.js

@@ -0,0 +1 @@
+export * from './TS_GridTableProto.js';

package/components/TS_Input/ATS_TextArea.d.ts

@@ -0,0 +1,14 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { AppToolsScreen } from '../TS_AppTools/index.js';
+import './ATS_TextArea.scss';
+type State = {
+    regularValue?: string;
+    resizeValue?: string;
+};
+export declare class ATS_TextArea extends ComponentSync<{}, State> {
+    static Screen: AppToolsScreen;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderRegularTextArea;
+    private renderResizingTextArea;
+}
+export {};

package/components/TS_Input/ATS_TextArea.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_AppTools } from '../TS_AppTools/index.js';
+import { LL_H_C, LL_V_L } from '../Layouts/index.js';
+import { TS_PropRenderer } from '../TS_PropRenderer/index.js';
+import { TS_TextArea } from './TS_TextArea.js';
+import './ATS_TextArea.scss';
+export class ATS_TextArea extends ComponentSync {
+    static Screen = {
+        group: 'TS Components',
+        name: 'TS_TextArea',
+        key: 'ts-textarea',
+        renderer: this,
+    };
+    render() {
+        return _jsxs(LL_V_L, { className: 'ats__ts-text-area', children: [TS_AppTools.renderPageHeader('TS_TextArea Tests'), _jsxs(LL_H_C, { className: 'ats__ts-text-area__content', children: [this.renderRegularTextArea(), this.renderResizingTextArea()] })] });
+    }
+    renderRegularTextArea = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Regular Text Area', children: _jsx(TS_TextArea, { type: 'text', value: this.state.regularValue, onChange: value => this.setState({ regularValue: value }) }) });
+    };
+    renderResizingTextArea = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Resizing Text Area', children: _jsx(TS_TextArea, { type: 'text', resizeWithText: true, value: this.state.resizeValue, onChange: value => this.setState({ resizeValue: value }) }) });
+    };
+}

package/components/TS_Input/ATS_TextArea.scss

@@ -0,0 +1,24 @@
+.ats__ts-text-area {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  gap: 20px;
+
+  .app-tools-page__page__header {
+    margin: 0 !important;
+    padding-top: 0;
+  }
+
+  .ats__ts-text-area__content {
+    gap: 20px;
+    align-items: flex-start;
+
+    .ts-textarea {
+      scrollbar-gutter: stable;
+      width: 300px;
+      min-height: 200px;
+      max-height: 300px;
+      resize: none;
+    }
+  }
+}

package/components/TS_Input/TS_BaseInput.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ChangeEvent, CSSProperties, HTMLProps, KeyboardEvent } from 'react';
+export type InputType = 'text' | 'number' | 'password';
+export type TS_BaseInputProps<Key, Element> = Omit<HTMLProps<Element>, 'onChange' | 'onBlur'> & {
+    type: InputType;
+    style?: CSSProperties;
+    id?: Key;
+    onChange?: (value: string, id: Key) => void;
+    onAccept?: (value: string, event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onCancel?: () => void;
+    onBlur?: (value: string, event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    enable?: boolean;
+    name?: string;
+    value?: string;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    focus?: boolean;
+    spellCheck?: boolean;
+    autoComplete?: boolean;
+    innerRef?: React.RefObject<any>;
+};
+type InputState = {
+    id: string;
+    name?: string;
+    initialValue?: string;
+    value?: string;
+    placeholder?: string;
+};
+export declare abstract class TS_BaseInput<Key extends string, Props extends TS_BaseInputProps<Key, Input>, Input = HTMLInputElement | HTMLTextAreaElement> extends React.Component<Props, InputState> {
+    protected ref?: HTMLInputElement | HTMLTextAreaElement;
+    constructor(props: Props);
+    static getDerivedStateFromProps(props: TS_BaseInputProps<any, any>, state: InputState): {
+        id: any;
+        name: string | undefined;
+        initialValue: string | (readonly string[] & string) | undefined;
+        value: string;
+        placeholder: string | undefined;
+    } | {
+        value: string | undefined;
+    };
+    private static getInitialState;
+    changeValue: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}
+export {};

package/components/TS_Input/TS_BaseInput.js

@@ -0,0 +1,47 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+export class TS_BaseInput extends React.Component {
+    ref;
+    constructor(props) {
+        super(props);
+        this.state = TS_BaseInput.getInitialState(props);
+    }
+    static getDerivedStateFromProps(props, state) {
+        if (props.id === state.id && state.name === props.name && state.initialValue === props.value)
+            return { value: state.value };
+        return TS_BaseInput.getInitialState(props);
+    }
+    static getInitialState(props) {
+        return {
+            id: props.id,
+            name: props.name,
+            initialValue: props.value,
+            value: props.value || '',
+            placeholder: props.placeholder
+        };
+    }
+    changeValue = (event) => {
+        const value = event.target.value;
+        this.setState({ value });
+        this.props.onChange?.(value, event.target.id);
+    };
+}

package/components/TS_Input/TS_Input.d.ts

@@ -0,0 +1,24 @@
+import { KeyboardEvent } from 'react';
+import { TS_BaseInput, TS_BaseInputProps } from './TS_BaseInput.js';
+import './TS_Input.scss';
+type MetaKeys = 'shiftKey' | 'altKey' | 'ctrlKey' | 'metaKey';
+export type TS_InputProps<Key extends string | number> = TS_BaseInputProps<Key, HTMLInputElement> & {
+    trim?: boolean;
+    forceAcceptKeys?: MetaKeys[];
+};
+/**
+ * A better way to capture user input
+ *
+ * <code>
+ * 		<input className="ts-input"/>
+ * </code>
+ *
+ */
+export declare class TS_Input<Key extends string = string> extends TS_BaseInput<Key, TS_InputProps<Key>, HTMLInputElement> {
+    static defaultProps: {
+        forceAcceptKeys: MetaKeys[];
+    };
+    onKeyDown: (ev: KeyboardEvent<HTMLInputElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Input/TS_Input.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { _className } from '../../utils/tools.js';
+import { TS_BaseInput } from './TS_BaseInput.js';
+import './TS_Input.scss';
+/**
+ * A better way to capture user input
+ *
+ * <code>
+ * 		<input className="ts-input"/>
+ * </code>
+ *
+ */
+export class TS_Input extends TS_BaseInput {
+    static defaultProps = {
+        forceAcceptKeys: ['ctrlKey', 'metaKey']
+    };
+    onKeyDown = (ev) => {
+        let value = ev.currentTarget.value;
+        if (!(ev.shiftKey || ev.altKey || ev.ctrlKey || ev.metaKey)) {
+            if (ev.key === 'Enter') {
+                ev.persist();
+                if (this.props.trim)
+                    value = value.trim();
+                //@ts-ignore - despite what typescript says, ev.target does have a blur function.
+                ev.target.blur();
+                if (this.props.onAccept) {
+                    if (value !== this.props.value)
+                        this.props.onAccept(value, ev);
+                    ev.stopPropagation();
+                }
+            }
+            if (ev.key === 'Escape' && this.props.onCancel) {
+                this.props.onCancel();
+                ev.stopPropagation();
+            }
+        }
+        if (ev.key === 'Enter' && this.props.forceAcceptKeys?.find(key => ev[key]))
+            if (this.props.onAccept) {
+                if (value !== this.props.value)
+                    this.props.onAccept(value, ev);
+                ev.stopPropagation();
+            }
+        this.props.onKeyDown?.(ev);
+    };
+    render() {
+        const { onAccept, innerRef, trim, forceAcceptKeys, focus, ...props } = this.props;
+        return _jsx("input", { ...props, autoFocus: focus, ref: innerRef, onBlur: (event) => {
+                const value = event.target.value;
+                this.setState({ value });
+                props.onBlur?.(value, event);
+            }, name: props.name || props.id, placeholder: this.state.placeholder, className: _className('ts-input', props.disabled ? 'disabled' : undefined, props.className), value: this.state.value, onChange: this.changeValue, onKeyDown: this.onKeyDown, autoComplete: props.autoComplete ? 'on' : 'off', disabled: props.disabled });
+    }
+}

package/components/TS_Input/TS_Input.scss

@@ -0,0 +1,64 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.ts-input {
+  //Dimensions
+  width: 100%;
+  min-width: 50px;
+  padding-inline: 10px;
+  background: unset;
+
+  //Font
+  font-size: 1rem;
+
+  //Border
+  border: 1px solid black;
+  border-radius: 4px;
+
+  &:focus-visible {
+    outline: 1px solid #3ca0c6;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.align-center {
+  text-align: center;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  appearance: none;
+}
+
+input[type="number"]:focus,
+input[type="number"]:hover {
+  appearance: auto;
+}

package/components/TS_Input/TS_TextArea.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { KeyboardEvent } from 'react';
+import { TS_BaseInput, TS_BaseInputProps } from './TS_BaseInput.js';
+import './TS_TextArea.scss';
+export type TS_TextAreaProps<Key> = TS_BaseInputProps<Key, HTMLTextAreaElement> & {
+    resizeWithText?: boolean;
+};
+export declare class TS_TextArea<Key extends string> extends TS_BaseInput<Key, TS_TextAreaProps<Key>, HTMLTextAreaElement> {
+    componentDidMount(): void;
+    onKeyDown: (ev: KeyboardEvent<HTMLTextAreaElement>) => void;
+    resizeWithText: () => void;
+    _changeValue: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_Input/TS_TextArea.js

@@ -0,0 +1,72 @@
+import { createElement as _createElement } from "react";
+import { TS_BaseInput } from './TS_BaseInput.js';
+import './TS_TextArea.scss';
+import { _className } from '../../utils/tools.js';
+import { getComputedStyleProperty } from '../utils.js';
+export class TS_TextArea extends TS_BaseInput {
+    componentDidMount() {
+        if (this.state.value && this.props.resizeWithText)
+            this.resizeWithText();
+    }
+    onKeyDown = (ev) => {
+        if (!(ev.shiftKey || ev.altKey)) {
+            if (ev.ctrlKey || ev.metaKey) {
+                if (ev.key === 'Enter') {
+                    ev.persist();
+                    const value = ev.currentTarget.value;
+                    //@ts-ignore - despite what typescript says, ev.target does have a blur function.
+                    ev.target.blur();
+                    if (this.props.onAccept) {
+                        this.props.onAccept(value, ev);
+                        ev.stopPropagation();
+                    }
+                }
+                return;
+            }
+            if (ev.key === 'Escape' && this.props.onCancel) {
+                this.props.onCancel();
+                ev.stopPropagation();
+            }
+        }
+        this.props.onKeyDown?.(ev);
+    };
+    resizeWithText = () => {
+        const el = this.ref;
+        if (!el)
+            return;
+        const currentHeight = el.offsetHeight;
+        if (el.scrollHeight > currentHeight) { //Can increase height
+            const newHeight = el.scrollHeight + 5;
+            el.style.height = `${newHeight}px`;
+        }
+        else { //Check if height needs to be decreased
+            const borderWidthTop = Number(getComputedStyleProperty(el, 'border-top-width')?.replace('px', ''));
+            const borderWidthBottom = Number(getComputedStyleProperty(el, 'border-bottom-width')?.replace('px', ''));
+            const borderWidth = borderWidthTop + borderWidthBottom;
+            el.style.height = '1px';
+            const scrollHeight = el.scrollHeight;
+            const heightDiff = currentHeight - scrollHeight;
+            const newHeight = heightDiff <= borderWidth + 1 ? currentHeight : scrollHeight + borderWidth + 1;
+            el.style.height = `${newHeight}px`;
+        }
+    };
+    _changeValue = (e) => {
+        this.changeValue(e);
+        if (this.props.resizeWithText)
+            this.resizeWithText();
+    };
+    render() {
+        const { onAccept, focus, enable, resizeWithText, ...props } = this.props;
+        return _createElement("textarea", { ...props, ref: input => {
+                if (this.ref || !input)
+                    return;
+                this.ref = input;
+                this.props.focus && this.ref.focus();
+            }, onBlur: (event) => {
+                this.ref = undefined;
+                const value = event.target.value;
+                this.setState({ value });
+                this.props.onBlur?.(value, event);
+            }, disabled: this.props.disabled, name: this.props.name || this.props.id, key: this.props.id, id: this.props.id, className: _className('ts-textarea', this.props.className), style: this.props.style, value: this.state.value, placeholder: this.props.placeholder, onChange: this._changeValue, onKeyDown: this.props.onKeyDown || this.onKeyDown, autoComplete: this.props.autoComplete ? 'on' : 'off', spellCheck: this.props.spellCheck });
+    }
+}

package/components/TS_Input/TS_TextArea.scss

@@ -0,0 +1,41 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.ts-textarea {
+  //Dimensions
+  width: 100%;
+  min-width: 50px;
+  min-height: 50px;
+
+  padding-block: 4px;
+  padding-inline: 10px;
+
+  //Font
+  font-size: 1rem;
+
+  //Border
+  border: 1px solid black;
+  border-radius: 4px;
+
+  &:focus-visible {
+    outline: 1px solid #3ca0c6;
+  }
+}