@sellout/ui 0.0.6 → 0.0.8

package/build/utils/makeEventHandler.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function makeEventHandler(executeOnEvent?: Function): (eventHandler: Function) => (event: import("react").FormEvent<HTMLInputElement>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "jsnext:main": "build/index.es.js",
@@ -24,10 +24,7 @@
     "@fortawesome/pro-regular-svg-icons": "^5.12.1",
     "@fortawesome/pro-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.9",
-    "@sellout/utils": "^0.0.6",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/react": "^5.2.8",
+    "@sellout/utils": "^0.0.8",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
@@ -39,23 +36,21 @@
     "babel-loader": "^8.0.6",
     "jest": "^24.9.0",
     "polished": "^3.4.4",
-    "react": "^16.13.0",
     "react-animate-height": "^2.0.20",
-    "react-dom": "^16.13.0",
     "rollup": "^1.27.13",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-typescript2": "^0.25.3",
     "standard": "^14.3.1",
-    "styled-components": "^5.0.1",
     "ts-jest": "^24.2.0",
     "typescript": "^3.7.5"
   },
-  "gitHead": "293473fa4ad310e0ce454b24ba2670109bac0b4c",
+  "gitHead": "db838d4527debf14c48fb71bf0f564ec65152dca",
   "peerDependencies": {
-    "react": "^16",
-    "react-dom": "^16"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "styled-components": "^5.0.1"
   },
   "jest": {
     "preset": "ts-jest",

package/rollup.config.js

@@ -1,55 +1,20 @@
-import typescript from 'rollup-plugin-typescript2'
-import commonjs from 'rollup-plugin-commonjs'
-import external from 'rollup-plugin-peer-deps-external'
-import resolve from 'rollup-plugin-node-resolve'
+import typescript from "rollup-plugin-typescript2";
+import pkg from "./package.json";
 
-import pkg from './package.json'
+console.log(Object.keys(pkg.peerDependencies || {}));
 
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-      exports: 'named',
-      sourcemap: true
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-      exports: 'named',
-      sourcemap: true
-    }
-  ],
-  plugins: [
-    external(),
-    resolve(),
-    typescript({
-      rollupCommonJSResolveHack: true,
-      exclude: [
-        '**/*.stories.js'
-      ],
-      clean: true
-    }),
-    commonjs({
-      include: 'node_modules/**',
-      // left-hand side can be an absolute path, a path
-      // relative to the current directory, or the name
-      // of a module in node_modules
-      namedExports: {
-        'node_modules/react/index.js': [
-          'cloneElement',
-          'createContext',
-          'Component',
-          'createElement'
-        ],
-        'node_modules/react-dom/index.js': ['render', 'hydrate'],
-        'node_modules/react-is/index.js': [
-          'isElement',
-          'isValidElementType',
-          'ForwardRef'
-        ]
-      }
-    }),
-  ]
-}
+export default [
+  {
+    input: "src/index.ts",
+    external: Object.keys(pkg.peerDependencies || {}),
+    plugins: [
+      typescript({
+        typescript: require("typescript")
+      })
+    ],
+    output: [
+      { file: pkg.main, format: "cjs" },
+      { file: pkg.module, format: "esm" },
+    ]
+  }
+];

package/src/Colors.ts

@@ -1,7 +1,9 @@
 export enum Colors {
   White = "#FFFFFF",
-  OffWhite  = '#FCFCFC',
-  Blue = '#020151',
+  Black = "#000000",
+  Green = "#419D78",
+  OffWhite = "#FCFCFC",
+  Blue = "#020151",
   Red = "#E63946",
   Orange = "#FF700F",
   DarkOrange = "#D65600",
@@ -11,4 +13,5 @@ export enum Colors {
   Grey4 = "#BDBDBD",
   Grey5 = "#E0E0E0",
   Grey6 = "#F2F2F2",
+  Grey7 = 'F8F8F8',
 }

package/src/components/Icon.tsx

@@ -7,7 +7,7 @@ export const Icons = IconEnum;
 
 export type IconProps = {
   icon: any;
-  color?: Colors | null;
+  color?: Colors | string | null;
   onClick?: any | null;
   size?: string | number | undefined;
   position?: string;

package/src/components/Input.tsx

@@ -8,9 +8,11 @@ import Loader, { LoaderSizes } from "./Loader";
 type FormProps = {
   hovered: boolean;
   focused: boolean;
+  width?: string;
 };
 
 const Form = styled.form<FormProps>`
+  width: ${props => props.width};
   display: flex;
   flex-direction: row;
   position: relative;
@@ -111,11 +113,12 @@ const InputStyled = styled.input<StyledInputProps>`
 `;
 
 export type InputProps = {
+  inputRef?: React.Ref<HTMLInputElement>;
   autoFocus?: boolean | undefined;
   placeholder?: string;
   value: string;
   defaultValue?: string;
-  icon?: string;
+  icon?: any;
   type?: string;
   onMouseEnter?: any;
   onMouseLeave?: any;
@@ -124,13 +127,15 @@ export type InputProps = {
   onBlur?: any;
   onSubmit?: Function;
   onClear?: Function;
-  canSubmit?: boolean,
+  canSubmit?: boolean;
   loading?: boolean;
   margin?: string;
   padding?: string;
+  width?: string;
 };
 
 export default function Input({
+  inputRef,
   autoFocus,
   placeholder,
   value,
@@ -148,6 +153,7 @@ export default function Input({
   loading,
   margin,
   padding,
+  width,
 }: InputProps) {
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -164,6 +170,7 @@ export default function Input({
       hovered={hovered}
       focused={focused}
       onSubmit={event => submit(event)}
+      width={width}
     >
       {icon && (
         <LeftContainer>
@@ -175,6 +182,7 @@ export default function Input({
         </LeftContainer>
       )}
       <InputStyled
+        ref={inputRef}
         autoFocus={autoFocus}
         placeholder={placeholder}
         value={value}

package/src/components/Product.tsx

@@ -4,7 +4,7 @@ import * as Polished from "polished";
 import AnimateHeight from "react-animate-height";
 import { Colors } from "../Colors";
 import Counter, { CounterProps } from './Counter';
-// import * as PriceUtil from '@sellout/utils/.dist/price';
+import * as PriceUtil from '@sellout/utils/.dist/price';
 // import Icon from "./Icon";
 
 type RowProps = {
@@ -25,6 +25,7 @@ const Column = styled.div`
 const Container = styled.div`
   background-color: ${Colors.White};
   padding: 15px;
+  border-bottom: 1px solid ${Colors.Grey6};
 `;
 
 const Title = styled.div`
@@ -116,7 +117,6 @@ export default function Product({
   const toggle = () => {
     setShowEllipsis(!showEllipsis);
     setShowMore(!showMore)
-    
   }
   
   return (
@@ -124,7 +124,7 @@ export default function Product({
       <Row justify="space-between">
         <Column>
           <Title>{title}</Title>
-          <Price>${price}</Price>
+          <Price>${PriceUtil.output(price)}</Price>
         </Column>
         <Counter
           value={value}
@@ -134,9 +134,7 @@ export default function Product({
           onDecrement={onDecrement}
         />
       </Row>
-      <Row>
-        {subtitle && <Subtitle>{subtitle}</Subtitle>}
-      </Row>
+      <Row>{subtitle && <Subtitle>{subtitle}</Subtitle>}</Row>
       {(() => {
         if (!description) return;
 

package/src/index.ts

@@ -1,21 +1,28 @@
 import { Colors } from "./Colors";
-import Button from './components/Button';
+import Button, { ButtonTypes, ButtonStates } from './components/Button';
 import Counter from "./components/Counter";
 import Icon from "./components/Icon";
 import { IconEnum } from "./components/Icons";
 import Input from "./components/Input";
-import Loader from "./components/Loader";
+import Loader, { LoaderSizes } from "./components/Loader";
 import Product from "./components/Product";
+import makeEventHandler from './utils/makeEventHandler';
 
 const Icons = IconEnum;
 
-export { 
+export {
+  // Components
   Colors,
   Button,
+  ButtonTypes,
+  ButtonStates,
   Counter,
   Icon,
   Icons,
   Input,
   Loader,
+  LoaderSizes,
   Product,
- };
+  // Utils
+  makeEventHandler
+};

package/src/utils/makeEventHandler.ts

@@ -0,0 +1,8 @@
+export default function makeEventHandler(executeOnEvent: Function = () => {}) {
+  return function (eventHandler: Function) {
+    return function(event: React.FormEvent<HTMLInputElement>) {
+      executeOnEvent();
+      eventHandler(event.currentTarget.value as string);
+    };
+  }
+}