@nu-art/json-to-object-renderer 0.400.0

package/ATS_JsonToObject/ATS_JsonToObject.d.ts

@@ -0,0 +1,24 @@
+import { AppToolsScreen, ComponentSync, EditableItem } from '@nu-art/thunderstorm/frontend/index';
+import { InferProps, InferState } from '@nu-art/thunderstorm/frontend/utils/types';
+import React from 'react';
+type ATS_JsonToObject_Props = {};
+type ATS_JsonToObject_State = {
+    editable: EditableItem<TestType>;
+    freeText: boolean;
+};
+type TestType = {
+    a: string;
+    b: string;
+    c: string;
+};
+export declare class ATS_JsonToObject extends ComponentSync<ATS_JsonToObject_Props, ATS_JsonToObject_State> {
+    static screen: AppToolsScreen;
+    static defaultProps: {
+        modules: never[];
+        pageTitle: () => string;
+    };
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    constructor(p: ATS_JsonToObject_Props);
+    render(): React.JSX.Element;
+}
+export {};

package/ATS_JsonToObject/ATS_JsonToObject.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ATS_JsonToObject = void 0;
+const index_1 = require("@nu-art/thunderstorm/frontend/index");
+const Editor_JsonToObject_js_1 = require("../Editor_JsonToObject.js");
+const ts_common_1 = require("@nu-art/ts-common");
+const react_1 = __importDefault(require("react"));
+const validator = {
+    a: (0, ts_common_1.tsValidateString)(-1),
+    b: (0, ts_common_1.tsValidateString)(-1),
+    c: (0, ts_common_1.tsValidateString)(-1)
+};
+class ATS_JsonToObject extends index_1.ComponentSync {
+    static screen = { name: `DevTool - JsonToObject`, renderer: this };
+    static defaultProps = {
+        modules: [],
+        pageTitle: () => this.screen.name
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.freeText ??= false;
+        state.editable ??= new index_1.EditableItem({}).setAutoSave(true);
+        return state;
+    }
+    constructor(p) {
+        super(p);
+    }
+    render() {
+        return react_1.default.createElement(index_1.LL_V_L, null,
+            react_1.default.createElement(Editor_JsonToObject_js_1.Editor_JsonToObject, { isFreeTextMode: this.state.freeText, validator: validator, editable: this.state.editable, renderer: (editable) => {
+                    const item = editable.item;
+                    return react_1.default.createElement(index_1.LL_V_L, null,
+                        react_1.default.createElement(index_1.TS_PropRenderer.Vertical, { label: 'property a' }, item.a ?? 'no A'),
+                        react_1.default.createElement(index_1.TS_PropRenderer.Vertical, { label: 'property b' }, item.b ?? 'no B'));
+                } }),
+            react_1.default.createElement(index_1.TS_Button, { onClick: () => this.reDeriveState({ freeText: !this.state.freeText }) }, "toggle"));
+    }
+}
+exports.ATS_JsonToObject = ATS_JsonToObject;
+//# sourceMappingURL=ATS_JsonToObject.js.map

package/ATS_JsonToObject/ATS_JsonToObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ATS_JsonToObject.js","sourceRoot":"/Users/tacb0ss/dev/nu-art/beamz/_thunderstorm/json-to-object-renderer/src/main/","sources":["ATS_JsonToObject/ATS_JsonToObject.tsx"],"names":[],"mappings":";;;;;;AAAA,+DAAoI;AAEpI,sEAA8D;AAC9D,iDAA0E;AAC1E,kDAA0B;AAc1B,MAAM,SAAS,GAAoC;IAClD,CAAC,EAAE,IAAA,4BAAgB,EAAC,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,IAAA,4BAAgB,EAAC,CAAC,CAAC,CAAC;IACvB,CAAC,EAAE,IAAA,4BAAgB,EAAC,CAAC,CAAC,CAAC;CACvB,CAAC;AAEF,MAAa,gBACZ,SAAQ,qBAA6D;IAErE,MAAM,CAAC,MAAM,GAAmB,EAAC,IAAI,EAAE,wBAAwB,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC;IAEjF,MAAM,CAAC,YAAY,GAAG;QACrB,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;KACjC,CAAC;IAEQ,oBAAoB,CAAC,SAA2B,EAAE,KAAuB;QAClF,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC;QACzB,KAAK,CAAC,QAAQ,KAAK,IAAI,oBAAY,CAAW,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACpE,OAAO,KAAK,CAAC;IACd,CAAC;IAED,YAAY,CAAyB;QACpC,KAAK,CAAC,CAAC,CAAC,CAAC;IACV,CAAC;IAED,MAAM;QACL,OAAO,8BAAC,cAAM;YACb,8BAAC,4CAAmB,IACnB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EACnC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;oBAC3B,OAAO,8BAAC,cAAM;wBACb,8BAAC,uBAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAAG,IAAI,CAAC,CAAC,IAAI,MAAM,CAA4B;wBAC5F,8BAAC,uBAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAAG,IAAI,CAAC,CAAC,IAAI,MAAM,CAA4B,CACpF,CAAC;gBACX,CAAC,GACA;YACF,8BAAC,iBAAS,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAC,CAAC,aAAoB,CAC1F,CAAC;IACX,CAAC;;AApCF,4CAqCC"}

package/ATS_JsonToObject/ATS_JsonToObject.scss

@@ -0,0 +1,4 @@
+@use '@nu-art/thunderstorm/styles' as tsStyles;
+
+.ts-ats.ats-JsonToObject {
+}

package/ATS_JsonToObject/index.d.ts

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

package/ATS_JsonToObject/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ATS_JsonToObject.js"), exports);
+//# sourceMappingURL=index.js.map

package/ATS_JsonToObject/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"/Users/tacb0ss/dev/nu-art/beamz/_thunderstorm/json-to-object-renderer/src/main/","sources":["ATS_JsonToObject/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAsC"}

package/Editor_JsonToObject.d.ts

@@ -0,0 +1,21 @@
+import { EditableContentType, EditableItem, TS_EditableContent } from '@nu-art/thunderstorm/frontend/index';
+import { ValidatorTypeResolver } from '@nu-art/ts-common';
+import React, { ReactNode } from 'react';
+import { InferProps, InferState } from '@nu-art/thunderstorm/frontend/utils/types';
+import './Editor_JsonToObject.scss';
+type Props<T> = {
+    validator: ValidatorTypeResolver<EditableContentType<T>>;
+    renderer: (item: EditableItem<EditableContentType<T>>) => ReactNode;
+    isFreeTextMode: boolean;
+};
+type State = {
+    isFreeTextMode: boolean;
+    value: string;
+    isValid: boolean;
+};
+export declare class Editor_JsonToObject<T> extends TS_EditableContent<T, Props<T>, State> {
+    protected deriveStateFromProps(nextProps: InferProps<this>, _state: InferState<this>): InferState<this>;
+    render(): React.JSX.Element;
+    private validateItem;
+}
+export {};

package/Editor_JsonToObject.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor_JsonToObject = void 0;
+const index_1 = require("@nu-art/thunderstorm/frontend/index");
+const ts_common_1 = require("@nu-art/ts-common");
+const react_1 = __importDefault(require("react"));
+const index_2 = require("@nu-art/thunderstorm/frontend/components/TS_V2_TextArea/index");
+require("./Editor_JsonToObject.scss");
+class Editor_JsonToObject extends index_1.TS_EditableContent {
+    deriveStateFromProps(nextProps, _state) {
+        const state = super.deriveStateFromProps(nextProps, _state);
+        state.isFreeTextMode = nextProps.isFreeTextMode;
+        const value = nextProps.editable.item ? (0, ts_common_1.__stringify)(nextProps.editable.item, true) : '';
+        state.value = value;
+        state.isValid = this.validateItem(value).isValid;
+        return state;
+    }
+    render() {
+        const { isFreeTextMode, value, editable, isValid } = this.state;
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            !isFreeTextMode && this.props.renderer(editable),
+            isFreeTextMode && react_1.default.createElement(index_2.TS_TextAreaV2, { className: 'ts-json-to-object', resizeWithText: true, "data-valid": isValid, type: "text", value: value, onChange: async (value) => {
+                    const { isValid } = this.validateItem(value);
+                    return this.setState({ isValid });
+                }, onBlur: async (value) => {
+                    const { isValid, item } = this.validateItem(value);
+                    if (!isValid)
+                        return this.setState({ isValid, value });
+                    await editable.updateObj(item);
+                } }));
+    }
+    validateItem(value) {
+        let isValid;
+        let item = {};
+        try {
+            item = JSON.parse(value);
+            isValid = (0, ts_common_1.tsValidateResult)(item, this.props.validator) === undefined;
+        }
+        catch (e) {
+            isValid = false;
+        }
+        return { isValid, item };
+    }
+}
+exports.Editor_JsonToObject = Editor_JsonToObject;
+//# sourceMappingURL=Editor_JsonToObject.js.map

package/Editor_JsonToObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor_JsonToObject.js","sourceRoot":"/Users/tacb0ss/dev/nu-art/beamz/_thunderstorm/json-to-object-renderer/src/main/","sources":["Editor_JsonToObject.tsx"],"names":[],"mappings":";;;;;;AAAA,+DAA0G;AAC1G,iDAAuF;AACvF,kDAAuC;AACvC,yFAA4F;AAE5F,sCAAoC;AAcpC,MAAa,mBACZ,SAAQ,0BAAsC;IAEpC,oBAAoB,CAAC,SAA2B,EAAE,MAAwB;QACnF,MAAM,KAAK,GAAG,KAAK,CAAC,oBAAoB,CAAC,SAAS,EAAE,MAAM,CAAqB,CAAC;QAChF,KAAK,CAAC,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC;QAEhD,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAA,uBAAW,EAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACxF,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QAEjD,OAAO,KAAK,CAAC;IACd,CAAC;IAED,MAAM;QACL,MAAM,EAAC,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9D,OAAO;YACL,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChD,cAAc,IAAI,8BAAC,qBAAa,IAChC,SAAS,EAAE,mBAAmB,EAC9B,cAAc,sBACF,OAAO,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;oBACzB,MAAM,EAAC,OAAO,EAAC,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;oBAC3C,OAAO,IAAI,CAAC,QAAQ,CAAC,EAAC,OAAO,EAAC,CAAC,CAAC;gBACjC,CAAC,EACD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;oBACvB,MAAM,EAAC,OAAO,EAAE,IAAI,EAAC,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;oBACjD,IAAI,CAAC,OAAO;wBACX,OAAO,IAAI,CAAC,QAAQ,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC,CAAC;oBAExC,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBAChC,CAAC,GACA,CAEA,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,KAAa;QACjC,IAAI,OAAgB,CAAC;QACrB,IAAI,IAAI,GAAG,EAA4B,CAAC;QACxC,IAAI,CAAC;YACJ,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAA2B,CAAC;YACnD,OAAO,GAAG,IAAA,4BAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,SAAS,CAAC;QACtE,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YACjB,OAAO,GAAG,KAAK,CAAC;QACjB,CAAC;QACD,OAAO,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;IACxB,CAAC;CACD;AAnDD,kDAmDC"}

package/Editor_JsonToObject.scss

@@ -0,0 +1,20 @@
+@use '@nu-art/thunderstorm/styles' as tsStyles;
+
+.ts-json-to-object {
+  align-items: stretch;
+
+  .ts-textarea .ts-json-to-object{
+    height: unset;
+  }
+
+  .ts-textarea .ts-json-to-object {
+    &[data-valid=false] {
+      background-color: rgba(255, 175, 154, 0.26);
+    }
+
+    &[data-valid=true] {
+      background-color: rgba(175, 255, 154, 0.26);
+    }
+  }
+
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@nu-art/json-to-object-renderer",
+  "version": "0.400.0",
+  "description": "Thunderstorm",
+  "keywords": [
+    "TacB0sS",
+    "express",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "scripts": {
+    "build": "tsc"
+  },
+  "contributors": [
+    {
+      "name": "TacB0sS"
+    },
+    {
+      "name": "Cipher",
+      "url": "https://www.linkedin.com/in/itay-leybovich-470b87229/"
+    }
+  ],
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@nu-art/firebase": "workspace:*",
+    "@nu-art/ts-common": "workspace:*",
+    "@nu-art/ts-styles": "workspace:*",
+    "@nu-art/thunderstorm": "workspace:*",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0"
+  },
+  "unitConfig": {
+    "customTSConfig": true,
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}