@sellout/ui 0.0.108 → 0.0.110

package/build/components/FormattedfullInput.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export declare enum InputfullFormats {
+    Price = "Price",
+    Percent = "Percent"
+}
+export declare type InputProps = {
+    inputRef?: React.Ref<HTMLInputElement>;
+    autoFocus?: boolean | undefined;
+    placeholder?: string;
+    value: string;
+    defaultValue?: string;
+    type?: string;
+    format?: InputfullFormats;
+    onMouseEnter?: any;
+    onMouseLeave?: any;
+    onChange?: any;
+    onFocus?: any;
+    onBlur?: any;
+    onSubmit?: Function;
+    canSubmit?: boolean;
+    loading?: boolean;
+    margin?: string;
+    width?: string;
+    onEnter?: Function;
+    label?: string;
+    subLabel?: string;
+    tip?: string;
+    maxLength?: number;
+    validationError?: string;
+    disabled?: boolean;
+};
+export default function Input({ inputRef, autoFocus, placeholder, value, defaultValue, format, type, onMouseEnter, onMouseLeave, onChange, onFocus, onBlur, onSubmit, canSubmit, loading, margin, width, onEnter, label, subLabel, tip, maxLength, validationError, disabled, }: InputProps): JSX.Element;

package/build/components/FormattedfullInput.js

@@ -0,0 +1,85 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { darken } from 'polished';
+import Icon, { Icons } from './Icon.js';
+import Label from './Label.js';
+import Flex from './Flex.js';
+import MaxLength from './MaxLength.js';
+import ValidationError from './ValidationError.js';
+import { media } from '../utils/MediaQuery.js';
+
+var InputfullFormats;
+(function (InputfullFormats) {
+    InputfullFormats["Price"] = "Price";
+    InputfullFormats["Percent"] = "Percent";
+})(InputfullFormats || (InputfullFormats = {}));
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (props) { return props.width; });
+var Form = styled.form(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", ";\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ", ";\n  overflow: hidden;\n"], ["\n  margin: ", ";\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ",
+    ";\n  overflow: hidden;\n"])), function (props) { return props.margin; }, function (props) { return props.width; }, function (props) {
+    if (props.focused)
+        return Colors.Grey4;
+    if (props.hovered)
+        return darken(0.05, Colors.Grey5);
+    return Colors.Grey5;
+});
+var PriceContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 25px;\n  background-color: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 25px;\n  background-color: ", ";\n"])), Colors.Grey5);
+var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  height: 38px;\n  width: 100%;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  text-indent: 1px;\n  transition: all 0.2s;\n  padding: 0 16px;\n  text-align: left;\n\n  ", ";\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  background-color: ",
+    ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  height: 38px;\n  width: 100%;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  text-indent: 1px;\n  transition: all 0.2s;\n  padding: 0 16px;\n  text-align: left;\n\n  ",
+    ";\n\n  ",
+    ";\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
+    return props.disabled ? Colors.Grey6 + " !important" : null;
+}, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, media.mobile(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: 1.6rem;\n  "], ["\n    font-size: 1.6rem;\n  "]))), media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-size: 1.4rem;\n  "], ["\n    font-size: 1.4rem;\n  "]))), Colors.Grey4);
+var IconText = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 600;\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 600;\n  color: ", ";\n"])), Colors.Grey3);
+function Input(_a) {
+    var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, _b = _a.format, format = _b === void 0 ? InputfullFormats.Price : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
+    var _f = useState(false), hovered = _f[0], setHovered = _f[1];
+    var _g = useState(false), focused = _g[0], setFocused = _g[1];
+    var submit = function (event) {
+        event.preventDefault();
+        if (onSubmit && canSubmit && !loading) {
+            onSubmit();
+        }
+        else if (onEnter && !loading) {
+            onEnter();
+        }
+    };
+    return (React.createElement(Container, { width: width },
+        React.createElement(Flex, { justify: "space-between" },
+            label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
+            maxLength && React.createElement(MaxLength, { value: value, maxLength: maxLength })),
+        React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width, margin: margin, noValidate // disables default html5 validation
+            : true, disabled: disabled },
+            format === InputfullFormats.Price && (React.createElement(PriceContainer, null,
+                React.createElement(Icon, { icon: Icons.Dollar, size: 14, color: Colors.Grey3 }))),
+            React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: function (e) {
+                    if (maxLength && e.currentTarget.value.length > maxLength) ;
+                    else {
+                        onChange(e);
+                    }
+                }, onFocus: function (event) {
+                    setFocused(true);
+                    if (onFocus)
+                        onFocus(event);
+                }, onBlur: function (event) {
+                    setFocused(false);
+                    if (onFocus)
+                        onBlur(event);
+                }, onMouseEnter: function (event) {
+                    setHovered(true);
+                    if (onMouseEnter)
+                        onMouseEnter(event);
+                }, onMouseLeave: function (event) {
+                    setHovered(false);
+                    if (onMouseLeave)
+                        onMouseLeave(event);
+                } }),
+            format === InputfullFormats.Percent && (React.createElement(PriceContainer, null,
+                React.createElement(IconText, null, "%")))),
+        validationError && (React.createElement(ValidationError, { validationError: validationError }))));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export default Input;
+export { InputfullFormats };

package/build/index.d.ts

@@ -5,6 +5,7 @@ import Counter from "./components/Counter";
 import Dropdown from "./components/Dropdown";
 import Flex from "./components/Flex";
 import FormattedInput, { InputFormats } from "./components/FormattedInput";
+import FormattedfullInput, { InputfullFormats } from "./components/FormattedfullInput";
 import Icon, { Icons } from "./components/Icon";
 import Input from "./components/Input";
 import Label from "./components/Label";
@@ -24,4 +25,4 @@ import * as ErrorUtil from './utils/ErrorUtil';
 import makeEventHandler from './utils/makeEventHandler';
 import * as MediaQuery from './utils/MediaQuery';
 import * as Validation from './utils/Validation';
-export { Colors, Button, CodeInput, Counter, Dropdown, Flex, FormattedInput, InputFormats, Icon, Icons, Input, Label, MaxLength, Loader, LoaderSizes, Motion, PhoneNumberInput, Product, TextButton, Tip, UserImage, UserInfo, ValidationError, ErrorUtil, makeEventHandler, MediaQuery, Validation, AddressSearchDropdown, SearchDropdown };
+export { Colors, Button, CodeInput, Counter, Dropdown, Flex, FormattedInput, InputFormats, FormattedfullInput, InputfullFormats, Icon, Icons, Input, Label, MaxLength, Loader, LoaderSizes, Motion, PhoneNumberInput, Product, TextButton, Tip, UserImage, UserInfo, ValidationError, ErrorUtil, makeEventHandler, MediaQuery, Validation, AddressSearchDropdown, SearchDropdown };

package/build/index.js

@@ -15,6 +15,7 @@ export { default as ValidationError } from './components/ValidationError.js';
 import * as MediaQuery from './utils/MediaQuery.js';
 export { MediaQuery };
 export { default as FormattedInput, InputFormats } from './components/FormattedInput.js';
+export { default as FormattedfullInput, InputfullFormats } from './components/FormattedfullInput.js';
 export { default as Input } from './components/Input.js';
 export { default as PhoneNumberInput } from './components/PhoneNumberInput.js';
 export { default as Product } from './components/Product.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.108",
+  "version": "0.0.110",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
@@ -56,8 +56,8 @@
     "@hapi/joi": "^17.1.1",
     "@react-pdf/primitives": "^2.0.0",
     "@react-pdf/renderer": "^2.0.20",
-    "@sellout/models": "^0.0.108",
-    "@sellout/utils": "^0.0.108",
+    "@sellout/models": "^0.0.110",
+    "@sellout/utils": "^0.0.110",
     "@types/escape-html": "^1.0.1",
     "@types/hapi__joi": "^16.0.12",
     "@types/react-pdf": "^4.0.6",
@@ -71,7 +71,7 @@
     "shortid": "^2.2.16",
     "use-places-autocomplete": "^1.9.4"
   },
-  "gitHead": "f64d10d501ae0ff62171846f9c4ce5b83b5bba52",
+  "gitHead": "f0424d166bf32ead0bce38f54d5d37caec02cfc6",
   "peerDependencies": {
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

package/build/stories/Button.stories.d.ts

@@ -1,9 +0,0 @@
-declare namespace _default {
-    export const title: string;
-    export { OldButton as component };
-}
-export default _default;
-export function Text(): JSX.Element;
-export function Loading(): JSX.Element;
-export function MaxWidth(): JSX.Element;
-import OldButton from "../components/Button";

package/build/stories/Counter.stories.d.ts

@@ -1,7 +0,0 @@
-declare namespace _default {
-    export const title: string;
-    export { Counter as component };
-}
-export default _default;
-export function Default(): JSX.Element;
-import Counter from "../components/Counter";

package/build/stories/Icon.stories.d.ts

@@ -1,7 +0,0 @@
-declare namespace _default {
-    export const title: string;
-    export { Icon as component };
-}
-export default _default;
-export function Plain(): JSX.Element;
-import Icon from "../components/Icon";

package/build/stories/Input.stories.d.ts

@@ -1,9 +0,0 @@
-declare namespace _default {
-    export const title: string;
-    export { Input as component };
-}
-export default _default;
-export function Clear(): JSX.Element;
-export function Submit(): JSX.Element;
-export function Loading(): JSX.Element;
-import Input from "../components/Input";

package/build/stories/Loader.stories.d.ts

@@ -1,11 +0,0 @@
-declare namespace _default {
-    export const title: string;
-    export { Loader as component };
-}
-export default _default;
-export function VerySmall(): JSX.Element;
-export function Small(): JSX.Element;
-export function Medium(): JSX.Element;
-export function Large(): JSX.Element;
-export function Colored(): JSX.Element;
-import Loader from "../components/Loader";

package/build/stories/Product.stories.d.ts

@@ -1,8 +0,0 @@
-declare namespace _default {
-    export const title: string;
-    export { Product as component };
-}
-export default _default;
-export function Default(): JSX.Element;
-export function Simple(): JSX.Element;
-import Product from "../components/Product";