@sellout/ui 0.0.1

package/src/components/Icons.ts

@@ -0,0 +1,189 @@
+import { faUserFriends as AudienceRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faCashRegister as BoxOfficeRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faCalculator as CalculatorRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faCalendarStar as CalendarStarRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faCheck as Check } from "@fortawesome/pro-regular-svg-icons";
+import { faGlassCheers as Cheers } from "@fortawesome/pro-regular-svg-icons";
+import { faClipboardList as Clipboard } from "@fortawesome/pro-regular-svg-icons";
+import { faCrown as CrownRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faTachometer as DashboardRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faTrash as DeleteRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faDollarSign as Dollar } from "@fortawesome/pro-regular-svg-icons";
+import { faArrowAltDown as DownArrow } from "@fortawesome/pro-regular-svg-icons";
+import { faFileDownload as DownloadReport } from "@fortawesome/pro-regular-svg-icons";
+import { faCode as Embed } from "@fortawesome/pro-regular-svg-icons";
+import { faFileExport as Export } from "@fortawesome/pro-regular-svg-icons";
+import { faUsdSquare as FeeRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faFilter as FilterRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faGlobeAmericas as GlobeRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faChartLine as GraphGrowth } from "@fortawesome/pro-regular-svg-icons";
+import { faKeySkeleton as KeyRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faChevronLeft as LeftChevron } from "@fortawesome/pro-regular-svg-icons";
+import { faLink as Link } from "@fortawesome/pro-regular-svg-icons";
+import { faMicrophoneAlt as MicrophoneRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faPrint as PrintRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faReceipt as ReceiptRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faFileChartLine as ReportRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faSearch as SearchRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faTicketAlt as TicketRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faUnlock as Unlock } from "@fortawesome/pro-regular-svg-icons";
+import { faArrowAltUp as UpArrow } from "@fortawesome/pro-regular-svg-icons";
+import { faArrowAltSquareUp as UpgradeRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faUpload as Upload } from "@fortawesome/pro-regular-svg-icons";
+import { faUsers as UsersRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faLandmark as VenueRegular } from "@fortawesome/pro-regular-svg-icons";
+import { faUserFriends as AudienceSolid } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft as BackArrow } from "@fortawesome/free-solid-svg-icons";
+import { faBold as Bold } from "@fortawesome/free-solid-svg-icons";
+import { faCashRegister as BoxOfficeSolid } from "@fortawesome/free-solid-svg-icons";
+import { faBullhorn as Bullhorn } from "@fortawesome/free-solid-svg-icons";
+import { faCalculator as CalculatorSolid } from "@fortawesome/free-solid-svg-icons";
+import { faCalendarDay as CalendarDaySolid } from "@fortawesome/free-solid-svg-icons";
+import { faTimes as Cancel } from "@fortawesome/free-solid-svg-icons";
+import { faTimesCircle as CancelCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown as CaretDown } from "@fortawesome/free-solid-svg-icons";
+import { faMoneyBill as Cash } from "@fortawesome/free-solid-svg-icons";
+import { faCheckCircle as CheckCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCopy as CopySolid } from "@fortawesome/free-solid-svg-icons";
+import { faCreditCard as CreditCardBack } from "@fortawesome/free-solid-svg-icons";
+import { faCrown as CrownSolid } from "@fortawesome/free-solid-svg-icons";
+import { faICursor as Cursor } from "@fortawesome/free-solid-svg-icons";
+import { faTrash as DeleteSolid } from "@fortawesome/free-solid-svg-icons";
+import { faEnvelope as EnvelopeSolid } from "@fortawesome/free-solid-svg-icons";
+import { faEye as EyeSolid } from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle as HelpSolid } from "@fortawesome/free-solid-svg-icons";
+import { faItalic as Italic } from "@fortawesome/free-solid-svg-icons";
+import { faMicrophoneAlt as MicrophoneSolid } from "@fortawesome/free-solid-svg-icons";
+import { faMobileAlt as Mobile } from "@fortawesome/free-solid-svg-icons";
+import { faPlusCircle as PlusCircle } from "@fortawesome/free-solid-svg-icons";
+import { faPrint as PrintSolid } from "@fortawesome/free-solid-svg-icons";
+import { faReceipt as ReceiptSolid } from "@fortawesome/free-solid-svg-icons";
+import { faChevronCircleRight as RightChevronCircle } from "@fortawesome/free-solid-svg-icons";
+import { faSearch as SearchSolid } from "@fortawesome/free-solid-svg-icons";
+import { faSort as Sort } from "@fortawesome/free-solid-svg-icons";
+import { faTicketAlt as TicketSolid } from "@fortawesome/free-solid-svg-icons";
+import { faUnderline as Underline } from "@fortawesome/free-solid-svg-icons";
+import { faUserCircle as UserCircle } from "@fortawesome/free-solid-svg-icons";
+import { faUser as UserSolid } from "@fortawesome/free-solid-svg-icons";
+import { faUsers as UsersSolid } from "@fortawesome/free-solid-svg-icons";
+import { faLandmark as VenueSolid } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationTriangle as Warning } from "@fortawesome/free-solid-svg-icons";
+import { faCalendarAlt as Calendar } from "@fortawesome/free-regular-svg-icons";
+import { faClock as Clock } from "@fortawesome/free-regular-svg-icons";
+import { faCopy as CopyRegular } from "@fortawesome/free-regular-svg-icons";
+import { faEdit as Edit } from "@fortawesome/free-regular-svg-icons";
+import { faEye as EyeRegular } from "@fortawesome/free-regular-svg-icons";
+import { faEyeSlash as EyeSlashRegular } from "@fortawesome/free-regular-svg-icons";
+import { faQuestionCircle as HelpRegular } from "@fortawesome/free-regular-svg-icons";
+import { faSadTear as SadTear } from "@fortawesome/free-regular-svg-icons";
+import { faUser as UserRegular } from "@fortawesome/free-regular-svg-icons";
+import { faCalendarDay as CalendarDayLight } from "@fortawesome/pro-light-svg-icons";
+import { faMapMarkerAlt as mapPinLight } from "@fortawesome/pro-light-svg-icons";
+import { faMinusCircle as MinusCircleLight } from "@fortawesome/pro-light-svg-icons";
+import { faPlusCircle as PlusCircleLight } from "@fortawesome/pro-light-svg-icons";
+import { faCalendarStar as CalendarStarSolid } from "@fortawesome/pro-solid-svg-icons";
+import { faCreditCardFront as CreditCardFront } from "@fortawesome/pro-solid-svg-icons";
+import { faTachometer as DashboardSolid } from "@fortawesome/pro-solid-svg-icons";
+import { faUsdSquare as FeeSolid } from "@fortawesome/pro-solid-svg-icons";
+import { faKeySkeleton as KeySolid } from "@fortawesome/pro-solid-svg-icons";
+import { faLongArrowRight as LongRightArrow } from "@fortawesome/pro-solid-svg-icons";
+import { faFileChartLine as ReportSolid } from "@fortawesome/pro-solid-svg-icons";
+import { faSortAlt as SortBy } from "@fortawesome/pro-solid-svg-icons";
+import { faArrowAltSquareUp as UpgradeSolid } from "@fortawesome/pro-solid-svg-icons";
+
+// import { library } from "@fortawesome/fontawesome-svg-core";
+
+export const IconEnum = {
+  AudienceRegular,
+	BoxOfficeRegular,
+	CalculatorRegular,
+	CalendarStarRegular,
+	Check,
+	Cheers,
+	Clipboard,
+	CrownRegular,
+	DashboardRegular,
+	DeleteRegular,
+	Dollar,
+	DownArrow,
+	DownloadReport,
+	Embed,
+	Export,
+	FeeRegular,
+	FilterRegular,
+	GlobeRegular,
+	GraphGrowth,
+	KeyRegular,
+	LeftChevron,
+	Link,
+	MicrophoneRegular,
+	PrintRegular,
+	ReceiptRegular,
+	ReportRegular,
+	SearchRegular,
+	TicketRegular,
+	Unlock,
+	UpArrow,
+	UpgradeRegular,
+	Upload,
+	UsersRegular,
+	VenueRegular,
+	AudienceSolid,
+	BackArrow,
+	Bold,
+	BoxOfficeSolid,
+	Bullhorn,
+	CalculatorSolid,
+	CalendarDaySolid,
+	Cancel,
+	CancelCircle,
+	CaretDown,
+	Cash,
+	CheckCircle,
+	CopySolid,
+	CreditCardBack,
+	CrownSolid,
+	Cursor,
+	DeleteSolid,
+	EnvelopeSolid,
+	EyeSolid,
+	HelpSolid,
+	Italic,
+	MicrophoneSolid,
+	Mobile,
+	PlusCircle,
+	PrintSolid,
+	ReceiptSolid,
+	RightChevronCircle,
+	SearchSolid,
+	Sort,
+	TicketSolid,
+	Underline,
+	UserCircle,
+	UserSolid,
+	UsersSolid,
+	VenueSolid,
+	Warning,
+	Calendar,
+	Clock,
+	CopyRegular,
+	Edit,
+	EyeRegular,
+	EyeSlashRegular,
+	HelpRegular,
+	SadTear,
+	UserRegular,
+	CalendarDayLight,
+	mapPinLight,
+	MinusCircleLight,
+	PlusCircleLight,
+	CalendarStarSolid,
+	CreditCardFront,
+	DashboardSolid,
+	FeeSolid,
+	KeySolid,
+	LongRightArrow,
+	ReportSolid,
+	SortBy,
+	UpgradeSolid,
+};

package/src/components/Input.tsx

@@ -0,0 +1,250 @@
+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;
+};
+
+const Form = styled.form<FormProps>`
+  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 = {
+  autoFocus?: boolean | undefined;
+  placeholder?: string;
+  value: string;
+  defaultValue?: string;
+  icon?: string;
+  type?: string;
+  onMouseEnter?: any;
+  onMouseLeave?: any;
+  onChange?: any;
+  onFocus?: any;
+  onBlur?: any;
+  onSubmit?: Function;
+  onClear?: Function;
+  canSubmit?: boolean,
+  loading?: boolean;
+  margin?: string;
+  padding?: string;
+};
+
+export default function Input({
+  autoFocus,
+  placeholder,
+  value,
+  defaultValue,
+  icon,
+  type = 'text',
+  onMouseEnter,
+  onMouseLeave,
+  onChange,
+  onFocus,
+  onBlur,
+  onSubmit,
+  onClear,
+  canSubmit = true,
+  loading,
+  margin,
+  padding,
+}: 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)}
+    >
+      {icon && (
+        <LeftContainer>
+          <Icon
+            icon={icon}
+            size={16}
+            color={focused ? Colors.Grey1 : Colors.Grey4}
+          />
+        </LeftContainer>
+      )}
+      <InputStyled
+        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

@@ -0,0 +1,84 @@
+import React from "react";
+import styled from "styled-components";
+import { Colors } from "./../Colors";
+
+export enum LoaderSizes {
+  VerySmall = "VerySmall",
+  Small = "Small",
+  Medium = "Medium",
+  Large = "Large"
+};
+
+const LoaderSizesMap = {
+  [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

@@ -0,0 +1,157 @@
+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 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;
+`;
+
+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>{price}</Price>
+        </Column>
+        <Counter
+          value={value}
+          minValue={minValue}
+          maxValue={maxValue}
+          onIncrement={onIncrement}
+          onDecrement={onDecrement}
+        />
+      </Row>
+      <Row>
+        {subtitle && <Subtitle>{subtitle}</Subtitle>}
+        {(() => {
+          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>
+          );
+        })()}
+      </Row>
+    </Container>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<div />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';