@threekit-tools/treble 0.0.56 → 0.0.57

package/dist/components/FlatForm/index.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -20,7 +39,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var flatForm_styles_1 = require("./flatForm.styles");
 var ProductName_1 = __importDefault(require("../ProductName"));
 var ProductDescription_1 = __importDefault(require("../ProductDescription"));
-var formComponents_1 = __importDefault(require("../formComponents"));
+var formComponents_1 = __importStar(require("../formComponents"));
 var utils_1 = require("../../utils");
 var useConfigurator_1 = __importDefault(require("../../hooks/useConfigurator"));
 var constants_1 = require("../../constants");
@@ -45,10 +64,12 @@ var FlatForm = function (props) {
             var Component;
             var props = ((_b = (_a = (attributes || {})) === null || _a === void 0 ? void 0 : _a[attr.name]) === null || _b === void 0 ? void 0 : _b.props) || {};
             var type = attr.type;
-            if (type === 'Asset' &&
-                attr.assetType === constants_1.ASSET_TYPES.upload) {
+            if (attr.type === 'Asset' && attr.assetType === constants_1.ASSET_TYPES.upload) {
                 type = attr.assetType;
             }
+            else if (attr.type === 'String' && attr.values.length === 0) {
+                type = formComponents_1.FORM_COMPONENT_TYPES.stringInput;
+            }
             if ((_d = (_c = (attributes || {})) === null || _c === void 0 ? void 0 : _c[attr.name]) === null || _d === void 0 ? void 0 : _d.component) {
                 Component = (_e = Object.entries(formComponents_1.default[type] || {}).find(function (_a) {
                     var _b, _c;

package/dist/components/TextInput/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IFormComponentProps } from '../containers/formInputContainer';
+export interface ITextInput extends IFormComponentProps<undefined> {
+}
+export declare const TextInput: {
+    (props: ITextInput): JSX.Element;
+    componentName: string;
+    compatibleAttributes: Set<string>;
+};
+declare const _default: (props: ITextInput) => JSX.Element | null;
+export default _default;

package/dist/components/TextInput/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+var react_1 = __importDefault(require("react"));
+// import PropTypes from 'prop-types';
+var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
+var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
+var textInput_styles_1 = require("./textInput.styles");
+var shared_styles_1 = require("../shared.styles");
+var utils_1 = require("../../utils");
+var constants_1 = require("../../constants");
+var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
+var TextInput = function (props) {
+    var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
+    var cls = (0, utils_1.generateInputClassName)('text-input', customClassName, title);
+    return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
+        react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
+        react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
+        react_1.default.createElement(textInput_styles_1.Input, { type: "text", value: value, onChange: function (e) { return onChange && onChange(e.target.value); }, className: cls })));
+};
+exports.TextInput = TextInput;
+exports.TextInput.componentName = 'text-input';
+exports.TextInput.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.string]);
+exports.default = (0, formInputContainer_1.default)(exports.TextInput);

package/dist/components/TextInput/textInput.styles.d.ts

@@ -0,0 +1 @@
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/TextInput/textInput.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: 0;\n  padding: 10px 6px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  width: 100%;\n  margin: 0;\n  padding: 10px 6px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return "".concat(props.theme.primaryColor, "33"); });
+var templateObject_1;

package/dist/components/containers/formInputContainer.d.ts

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react';
+import { RawAttributeValue } from '../../hooks/useAttribute';
 import { IDisplayAttributeAssetValue, IThreekitDisplayAttribute } from '../../threekit';
 export interface IOptionShared {
     name: string;
@@ -23,10 +24,11 @@ export interface IFormContainerProps extends Pick<MetadataKeys, 'metadataKeyThum
     title?: string;
     description?: string;
     value?: string;
-    onClick?: (value: string) => void;
+    onClick?: (value: RawAttributeValue) => Promise<void>;
+    onChange?: (value: RawAttributeValue) => Promise<void>;
     className?: string;
 }
-export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'className'> {
+export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'onChange' | 'className'> {
     options: null | undefined | Array<T>;
 }
 export interface IFormComponent<P> extends FunctionComponent<P> {

package/dist/components/formComponents.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+export declare const FORM_COMPONENT_TYPES: {
+    stringInput: string;
+};
 export declare const formComponents: {
     [x: string]: {
-        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
+        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null) | ((props: import("./TextInput").ITextInput) => JSX.Element | null);
     } | {
         [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
     };

package/dist/components/formComponents.js

@@ -18,9 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a, _b, _c, _d;
+var _a, _b, _c, _d, _e;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formComponents = void 0;
+exports.formComponents = exports.FORM_COMPONENT_TYPES = void 0;
 var constants_1 = require("../constants");
 var Cards_1 = __importStar(require("./Cards"));
 var Dropdown_1 = __importStar(require("./Dropdown"));
@@ -30,9 +30,13 @@ var Tiles_1 = __importStar(require("./Tiles"));
 var TilesGroup_1 = __importStar(require("./TilesGroup"));
 var Upload_1 = __importStar(require("./Upload"));
 // import UploadArea, { UploadArea as UploadAreaComponent } from './UploadArea';
+var TextInput_1 = __importStar(require("./TextInput"));
+exports.FORM_COMPONENT_TYPES = {
+    stringInput: 'string-input',
+};
+//  First option for each attribute type is the default value
 exports.formComponents = (_a = {},
     _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
-        //  First option is default
         _b[Strips_1.Strips.componentName] = Strips_1.default,
         _b[Cards_1.Cards.componentName] = Cards_1.default,
         _b[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
@@ -41,16 +45,19 @@ exports.formComponents = (_a = {},
         _b[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
         _b),
     _a[constants_1.ATTRIBUTE_TYPES.string] = (_c = {},
-        //  First option is default
         _c[Tiles_1.Tiles.componentName] = Tiles_1.default,
         _c[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
         _c[Cards_1.Cards.componentName] = Cards_1.default,
         _c[Strips_1.Strips.componentName] = Strips_1.default,
         _c[Swatch_1.Swatch.componentName] = Swatch_1.default,
         _c[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
+        _c[TextInput_1.TextInput.componentName] = TextInput_1.default,
         _c),
-    _a[constants_1.ASSET_TYPES.upload] = (_d = {},
-        _d[Upload_1.Upload.componentName] = Upload_1.default,
+    _a[exports.FORM_COMPONENT_TYPES.stringInput] = (_d = {},
+        _d[TextInput_1.TextInput.componentName] = TextInput_1.default,
         _d),
+    _a[constants_1.ASSET_TYPES.upload] = (_e = {},
+        _e[Upload_1.Upload.componentName] = Upload_1.default,
+        _e),
     _a);
 exports.default = exports.formComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [