@sellout/ui 0.0.57 → 0.0.60

package/src/components/Input.tsx

@@ -1,258 +0,0 @@
-import React, { Fragment, useState } from "react";
-import styled from "styled-components";
-import * as Polished from 'polished';
-import { Colors } from "../Colors";
-import Icon, { Icons } from './Icon'
-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;
-  border-radius: 10px;
-  transition: all 0.2s;
-  border: 1px solid
-    ${props => {
-      if (props.focused) return Colors.Grey3;
-      if (props.hovered) return Colors.Grey4;
-      return Colors.Grey5;
-    }};
-`;
-
-type ButtonProps = {
-  canSubmit: boolean;
-};
-
-const Button = styled.div<ButtonProps>`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${Colors.White};
-  height: 50px;
-  width: 50px;
-  border-radius: 0 10px 10px 0;
-  top: -1px;
-  right: -1px;
-  transition: all 0.2s;
-  background-color: ${props =>
-    props.canSubmit ? Colors.Orange : Colors.Grey6};
-
-  &:hover {
-    cursor: ${props => (props.onClick ? "pointer" : null)};
-    background-color: ${props =>
-      props.canSubmit ? Polished.lighten(0.025, Colors.Orange) : null};
-  }
-
-  &:active {
-    cursor: ${props => (props.onClick ? "pointer" : null)};
-    background-color: ${props =>
-      props.canSubmit ? Polished.darken(0.025, Colors.Orange) : null};
-  }
-`;
-
-const LeftContainer = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 15px;
-  top: 0px;
-  left: 0px;
-`;
-
-const RightContainer = styled.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  width: 50px;
-  top: -1px;
-  right: -1px;
-
-  &:hover {
-    cursor: ${props => (props.onClick ? "pointer" : null)};
-  }
-`;
-
-const Spacer = styled.div`
-  width: 50px;
-`;
-
-type StyledInputProps = {
-  margin?: string;
-  padding?: string;
-}
-
-const InputStyled = styled.input<StyledInputProps>`
-  background-color: ${Colors.White};
-  color: ${Colors.Grey1};
-  outline: none;
-  border: 0px;
-  border-radius: 10px;
-  height: 48px;
-  width: fill-available;
-  font-size: 1.4rem;
-  font-weight: 500;
-  padding: 0 0 0 10px;
-  transition: all 0.2s;
-  margin: ${props => props.margin};
-  padding: ${props => props.padding};
-  
-  ::placeholder {
-    color: ${Colors.Grey4};
-  }
-`;
-
-export type InputProps = {
-  inputRef?: React.Ref<HTMLInputElement>;
-  autoFocus?: boolean | undefined;
-  placeholder?: string;
-  value: string;
-  defaultValue?: string;
-  icon?: any;
-  type?: string;
-  onMouseEnter?: any;
-  onMouseLeave?: any;
-  onChange?: any;
-  onFocus?: any;
-  onBlur?: any;
-  onSubmit?: Function;
-  onClear?: Function;
-  canSubmit?: boolean;
-  loading?: boolean;
-  margin?: string;
-  padding?: string;
-  width?: string;
-};
-
-export default function Input({
-  inputRef,
-  autoFocus,
-  placeholder,
-  value,
-  defaultValue,
-  icon,
-  type = 'text',
-  onMouseEnter,
-  onMouseLeave,
-  onChange,
-  onFocus,
-  onBlur,
-  onSubmit,
-  onClear,
-  canSubmit = true,
-  loading,
-  margin,
-  padding,
-  width,
-}: InputProps) {
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-
-  const submit = (event: any) => {
-    event.preventDefault();
-    if(onSubmit && canSubmit && !loading) {
-      onSubmit();
-    }
-  }
-  
-  return (
-    <Form
-      hovered={hovered}
-      focused={focused}
-      onSubmit={event => submit(event)}
-      width={width}
-    >
-      {icon && (
-        <LeftContainer>
-          <Icon
-            icon={icon}
-            size={16}
-            color={focused ? Colors.Grey1 : Colors.Grey4}
-          />
-        </LeftContainer>
-      )}
-      <InputStyled
-        ref={inputRef}
-        autoFocus={autoFocus}
-        placeholder={placeholder}
-        value={value}
-        defaultValue={defaultValue}
-        type={type}
-        onChange={onChange}
-        onFocus={event => {
-          setFocused(true);
-          if (onFocus) onFocus(event);
-        }}
-        onBlur={event => {
-          setFocused(false);
-          if (onFocus) onBlur(event);
-        }}
-        onMouseEnter={(event: any) => {
-          setHovered(true);
-          if (onMouseEnter) onMouseEnter(event);
-        }}
-        onMouseLeave={(event: any) => {
-          setHovered(false);
-          if (onMouseLeave) onMouseLeave(event);
-        }}
-        margin={margin}
-        padding={padding}
-      />
-
-      {(() => {
-        if (onSubmit) {
-          return (
-            <Fragment>
-              <Spacer />
-              <Button
-                canSubmit={canSubmit}
-                onClick={event => submit(event)}
-              >
-                {(() => {
-                  if (loading) {
-                    return <Loader size={LoaderSizes.VerySmall} />;
-                  }
-
-                  return (
-                    <Icon
-                      icon={Icons.RightChevronCircle}
-                      color={canSubmit ? Colors.White : Colors.Grey4}
-                      size={16}
-                    />
-                  );
-                })()}
-              </Button>
-            </Fragment>
-          );
-        }
-
-        if (Boolean(value) && onClear) {
-          return (
-            <Fragment>
-              <Spacer />
-              <RightContainer onClick={() => onClear()}>
-                <Icon
-                  icon={Icons.CancelCircle}
-                  color={Colors.Grey3}
-                  size={16}
-                />
-              </RightContainer>
-            </Fragment>
-          );
-        }
-
-        return <Spacer />;
-      })()}
-    </Form>
-  );
-}

package/src/components/Loader.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Colors } from "./../Colors";
-
-export enum LoaderSizes {
-  FuckingTiny = "FuckingTiny",
-  SuperSmall = "SuperSmall",
-  VerySmall = "VerySmall",
-  Small = "Small",
-  Medium = "Medium",
-  Large = "Large",
-};
-
-const LoaderSizesMap = {
-  [LoaderSizes.FuckingTiny]: 14,
-  [LoaderSizes.SuperSmall]: 20,
-  [LoaderSizes.VerySmall]: 24,
-  [LoaderSizes.Small]: 30,
-  [LoaderSizes.Medium]: 40,
-  [LoaderSizes.Large]: 60
-};
-
-type StyledLoaderProps = {
-  size: number;
-  color: string;
-}
-
-const scale = (size: number, scale: number) => `${size * scale}px`;
-
-const StyledLoader = styled.div<StyledLoaderProps>`
-  position: relative;
-  top: 1.5px;
-
-  .lds-ring {
-    display: inline-block;
-    position: relative;
-    width: ${props => scale(props.size, 1)};
-    height: ${props => scale(props.size, 1)};
-  }
-  .lds-ring div {
-    box-sizing: border-box;
-    display: block;
-    position: absolute;
-    width: ${props => scale(props.size, .8)};
-    height: ${props => scale(props.size, .8)};
-    margin: ${props => scale(props.size, .1)};
-    border: ${props => scale(props.size, 0.066)} solid ${props => props.color};
-    border-radius: 50%;
-    animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: ${props => props.color} transparent transparent transparent;
-  }
-  .lds-ring div:nth-child(1) {
-    animation-delay: -0.3s;
-  }
-  .lds-ring div:nth-child(2) {
-    animation-delay: -0.2s;
-  }
-  .lds-ring div:nth-child(3) {
-    animation-delay: -0.1s;
-  }
-  @keyframes lds-ring {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-export default function Loader({
-  size = LoaderSizes.Medium,
-  color = Colors.White,
-}) {
-  return (
-    <StyledLoader 
-      size={LoaderSizesMap[size]} 
-      color={color}
-    >
-      <div className="lds-ring">
-        <div></div>
-        <div></div>
-        {/* <div></div> */}
-        <div></div>
-      </div>
-    </StyledLoader>
-  );
-}

package/src/components/Product.tsx

@@ -1,156 +0,0 @@
-import React, { Fragment, useState } from "react";
-import styled from "styled-components";
-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 Icon from "./Icon";
-
-type RowProps = {
-  justify?: string;
-};
-
-const Row = styled.div<RowProps>`
-  display: flex;
-  flex-direction: row;
-  justify-content: ${props => props.justify};
-`;
-
-const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const Container = styled.div`
-  background-color: ${Colors.White};
-  padding: 15px;
-  border-bottom: 1px solid ${Colors.Grey6};
-`;
-
-const Title = styled.div`
-  font-size: 1.8rem;
-  color: ${Colors.Grey1};
-  font-weight: 600;
-  margin-bottom: 5px;
-`;
-
-const Price = styled.div`
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: ${Colors.Grey2};
-  margin-bottom: 5px;
-`;
-
-const Subtitle = styled.div`
-  font-size: 1.2rem;
-  font-weight: 500;
-  line-height: 160%;
-  color: ${Colors.Grey3};
-`;
-
-const Description = styled.div`
-  font-size: 1.2rem;
-  font-weight: 500;
-  line-height: 160%;
-  color: ${Colors.Grey2};
-  margin-top: 10px;
-`;
-
-type EllipsisProps = {
-  active: boolean
-};
-
-const Ellipsis = styled.div<EllipsisProps>`
-  display: -webkit-box;
-  -webkit-line-clamp: ${props => props.active ? 3 : null};
-  -webkit-box-orient: ${props => props.active ? 'vertical' : null};
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const ShowMore = styled.div`
-  font-size: 1.2rem;
-  font-weight: 500;
-  line-height: 160%;
-  color: ${Colors.Orange};
-  transition: all 0.2s;
-
-  &:hover {
-    cursor: pointer;
-    color: ${Polished.lighten(0.025, Colors.Orange)};
-  }
-
-  &:active {
-    color: ${Polished.darken(0.025, Colors.Orange)};
-  }
-`;
-
-export type ProductProps = {
-  title: string;
-  price: number;
-  subtitle?: string;
-  description?: string;
-  imageUrl?: string;
-} & CounterProps
-
-export default function Product({
-  title = '',
-  price = 0,
-  subtitle = '',
-  description = '',
-  // Counter Props
-  value,
-  minValue,
-  maxValue,
-  onIncrement,
-  onDecrement,
-}: ProductProps) {
-  const [showMore, setShowMore] = useState(false);
-  const [showEllipsis, setShowEllipsis] = useState(true);
-
-  let descModified = description;
-  if (descModified.length > 210 && !showMore) {
-    descModified = descModified.substring(0, 210) + '...';
-  }
-
-  const toggle = () => {
-    setShowEllipsis(!showEllipsis);
-    setShowMore(!showMore)
-  }
-  
-  return (
-    <Container>
-      <Row justify="space-between">
-        <Column>
-          <Title>{title}</Title>
-          <Price>${PriceUtil.output(price)}</Price>
-        </Column>
-        <Counter
-          value={value}
-          minValue={minValue}
-          maxValue={maxValue}
-          onIncrement={onIncrement}
-          onDecrement={onDecrement}
-        />
-      </Row>
-      <Row>{subtitle && <Subtitle>{subtitle}</Subtitle>}</Row>
-      {(() => {
-        if (!description) return;
-
-        return (
-          <Fragment>
-            <AnimateHeight height={showMore ? "auto" : 67}>
-              <Ellipsis active={showEllipsis}>
-                <Description>{description}</Description>
-              </Ellipsis>
-            </AnimateHeight>
-            <ShowMore onClick={() => toggle()}>
-              {showMore ? "Show Less" : "Show More"}
-            </ShowMore>
-          </Fragment>
-        );
-      })()}
-    </Container>
-  );
-}

package/src/index.ts

@@ -1,28 +0,0 @@
-import { Colors } from "./Colors";
-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, { LoaderSizes } from "./components/Loader";
-import Product from "./components/Product";
-import makeEventHandler from './utils/makeEventHandler';
-
-const Icons = IconEnum;
-
-export {
-  // Components
-  Colors,
-  Button,
-  ButtonTypes,
-  ButtonStates,
-  Counter,
-  Icon,
-  Icons,
-  Input,
-  Loader,
-  LoaderSizes,
-  Product,
-  // Utils
-  makeEventHandler
-};

package/src/stories/Button.stories.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { action } from '@storybook/addon-actions';
-import Button from '../components/Button';
-
-const Container = styled.div`
-  width: 300px;
-  padding: 20px;
-`;
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Text = () => (
-  <Container>
-    <Button text="Next" onClick={action('clicked')} />
-  </Container>
-);
-
-export const Loading = () => (
-  <Container>
-    <Button loading={true} />
-  </Container>
-);
-
-export const MaxWidth = () => (
-  <Button text="Create Event" onClick={action('clicked')} />
-);

package/src/stories/Counter.stories.js

@@ -1,28 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import Counter from '../components/Counter';
-
-const Container = styled.div`
-  width: 370px;
-  padding: 20px;
-`;
-
-export default {
-  title: 'Counter',
-  component: Counter,
-};
-
-export const Default = () => {
-  const [value, setValue] = useState(0);
-  return (
-    <Container>
-      <Counter
-        value={value}
-        minValue={0}
-        maxValue={10}
-        onIncrement={() => setValue(value + 1)}
-        onDecrement={() => setValue(value - 1)}
-      />
-    </Container>
-  );
-};

package/src/stories/Icon.stories.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { action } from '@storybook/addon-actions';
-import Icon, { Icons } from '../components/Icon';
-import { Colors } from '../Colors';
-
-const Container = styled.div`
-  width: 300px;
-  padding: 20px;
-`;
-
-export default {
-  title: 'Icon',
-  component: Icon,
-};
-
-export const Plain = () => (
-  <Container>
-    <Icon 
-      icon={Icons.AudienceRegular} 
-      onClick={action('Clicked')}
-      color={Colors.Orange} 
-    />
-  </Container>
-);

package/src/stories/Input.stories.js

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { action } from '@storybook/addon-actions';
-import Input from '../components/Input';
-import { Icons } from '../components/Icon';
-
-const Container = styled.div`
-  width: 370px;
-  padding: 20px;
-`;
-
-export default {
-  title: 'Input',
-  component: Input,
-};
-
-export const Clear = () => {
-  const [value, setValue] = useState('');
-  return (
-    <Container>
-      <Input
-        placeholder="Enter your email address"
-        value={value}
-        icon={Icons.Unlock}
-        onChange={e => {
-          action('onChange')();
-          setValue(e.target.value);
-        }}
-        onClear={() => {
-          action('onClear')();
-          setValue('');
-        }}
-        onBlur={action('onBlur')}
-        onFocus={action('onFocus')}
-      />
-    </Container>
-  );
-};
-
-export const Submit = () => {
-  const [loading, setLoading] = useState(false);
-  const [value, setValue] = useState('');
-  return (
-    <Container>
-      <Input
-        placeholder="Enter your email address"
-        value={value}
-        icon={Icons.EnvelopeSolid}
-        onChange={e => {
-          action('onChange')();
-          setValue(e.target.value);
-        } }
-        onBlur={action('onBlur')}
-        onFocus={action('onFocus')}
-        canSubmit={value.length > 7}
-        onSubmit={() => {
-          action('onSubmit')();
-          setLoading(true);
-          setTimeout(() => setLoading(false), 3000);
-        }}
-        loading={loading}
-      />
-    </Container>
-  );
-};
-
-export const Loading = () => (
-  <Container>
-    <Input
-      placeholder="Enter your email address"
-      icon={Icons.EnvelopeSolid}
-      onChange={action('onChange')}
-      onBlur={action('onBlur')}
-      onFocus={action('onFocus')}
-      onSubmit={action('onSubmit')}
-      loading={true}
-    />
-  </Container>
-);