@sellout/ui 0.0.1

package/src/stories/Button.stories.js

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { action } from '@storybook/addon-actions';
+import Counter from '../components/Counter';
+import { Icons } from '../components/Icon';
+
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,79 @@
+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>
+);

package/src/stories/Loader.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import { action } from '@storybook/addon-actions';
+import Loader, { LoaderSizes } from '../components/Loader';
+import { Colors } from "../Colors";
+
+const Container = styled.div`
+  position: absolute;
+  background-color: ${props => props.color || Colors.Orange};
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default {
+  title: 'Loader',
+  component: Loader,
+};
+
+export const VerySmall = () => (
+  <Container>
+    <Loader size={LoaderSizes.VerySmall} />
+  </Container>
+);
+
+export const Small = () => (
+  <Container>
+    <Loader size={LoaderSizes.Small} />
+  </Container>
+);
+
+export const Medium = () => (
+  <Container>
+    <Loader size={LoaderSizes.Medium} />
+  </Container>
+);
+
+export const Large = () => (
+  <Container>
+    <Loader size={LoaderSizes.Large} />
+  </Container>
+);
+
+
+export const Colored = () => (
+  <Container color={Colors.White}>
+    <Loader size={LoaderSizes.Medium} color={Colors.Orange}/>
+  </Container>
+);

package/src/stories/Product.stories.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { action } from '@storybook/addon-actions';
+import Product from '../components/Product';
+import { Icons } from '../components/Icon';
+import { Colors } from '../Colors';
+
+const Container = styled.div`
+  width: 370px;
+  padding: 20px;
+  background-color: ${Colors.Grey4};
+`;
+
+export default {
+  title: 'Product',
+  component: Product,
+};
+
+export const Default = () => {
+  const [value, setValue] = useState(0);
+
+  const product = {
+    title: 'General Admission',
+    price: 1000,
+    subtitle: 'Comes with a free drink upgrade',
+    description: 'Do consequat ut ad enim. Minim commodo in Lorem aliqua aliquip cupidatat voluptate. Fugiat et incididunt enim pariatur eiusmod. Ex id sit nisi mollit laborum id ad. Ut aliquip nulla laboris eu occaecat tempor voluptate Lorem fugiat veniam elit ut eu quis. Aliqua reprehenderit mollit magna et fugiat sit cupidatat aliqua cillum dolore veniam. Sint anim incididunt ea consequat cillum laborum eu. Aute ipsum consequat cupidatat enim dolore amet incididunt occaecat esse consectetur occaecat. Dolor est ad ullamco fugiat occaecat anim minim aliqua Lorem. Ad culpa ipsum in labore minim sunt laboris nulla laboris.'
+  };
+
+  return (
+    <Container>
+      <Product
+        title={product.title}
+        price={product.price}
+        subtitle={product.subtitle}
+        description={product.description}
+        value={value}
+        minValue={0}
+        maxValue={10}
+        onIncrement={() => setValue(value + 1)}
+        onDecrement={() => setValue(value - 1)}
+      />
+    </Container>
+  );
+};
+
+export const Simple = () => {
+  const [value, setValue] = useState(0);
+
+  const product = {
+    title: 'General Admission',
+    price: 1000,
+  };
+
+  return (
+    <Container>
+      <Product
+        title={product.title}
+        price={product.price}
+        subtitle={product.subtitle}
+        description={product.description}
+        value={value}
+        minValue={0}
+        maxValue={10}
+        onIncrement={() => setValue(value + 1)}
+        onDecrement={() => setValue(value - 1)}
+      />
+    </Container>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}

package/utils/generateIconLibrary.js

@@ -0,0 +1,37 @@
+const csvFilePath = './icon-library.csv';
+const csv = require('csvtojson');
+
+csv()
+  .fromFile(csvFilePath)
+  .then((jsonObj) => {
+    const icons = jsonObj.reduce((cur, icon) => {
+      let key = `${icon.Library}-${icon.Weight}`.toLowerCase();
+      if(key.charAt(key.length - 1) === '-') return cur;
+      key = `@fortawesome/${key}-svg-icons`;
+
+      icon = {
+        import: `import { ${icon['FA Name']} as ${icon.Name}} from '${key}'`,
+        export: `${icon.Name}`,
+      };
+
+      if(cur[key]) {
+        cur[key].push(icon);
+      } else {
+        cur[key] = [icon];
+      }
+      return cur;
+    }, {});
+
+    let importText = '';
+    let exportText = 'export enum Icons {\n';
+
+    Object.values(icons).flat().forEach((icon) => {
+      importText += icon.import + '\n';
+      exportText += icon.export + ',\n\t';
+    })
+    exportText += '}'
+    
+    console.log(second);
+  })
+  .catch(e => console.error(e));
+  

package/utils/icon-library.csv

@@ -0,0 +1,98 @@
+Name,Icon,Library,Weight,FA Name
+,,,,
+AudienceRegular,FontAwesome%20Library/user-friends-regular.svg,Pro,Regular,faUserFriends
+Amex,FontAwesome%20Library/cc-amex-brands.svg,Brands,,faCcAmex
+AudienceSolid,FontAwesome%20Library/user-friends-solid.svg,Free,Solid,faUserFriends
+BackArrow,FontAwesome%20Library/arrow-left-solid.svg,Free,Solid,faArrowLeft
+Bold,FontAwesome%20Library/bold-solid.svg,Free,Solid,faBold
+BoxOfficeRegular,FontAwesome%20Library/cash-register-regular.svg,Pro,Regular,faCashRegister
+BoxOfficeSolid,FontAwesome%20Library/cash-register-solid.svg,Free,Solid,faCashRegister
+Bullhorn,FontAwesome%20Library/bullhorn-solid.svg,Free,Solid,faBullhorn
+CalculatorRegular,FontAwesome%20Library/calculator-regular.svg,Pro,Regular,faCalculator
+CalculatorSolid,FontAwesome%20Library/calculator-solid.svg,Free,Solid,faCalculator
+Calendar,FontAwesome%20Library/calendar-alt-regular.svg,Free,Regular,faCalendarAlt
+CalendarDayLight,FontAwesome%20Library/calendar-day-light.svg,Pro,Light,faCalendarDay
+CalendarDaySolid,FontAwesome%20Library/calendar-day-solid.svg,Free,Solid,faCalendarDay
+CalendarStarRegular,FontAwesome%20Library/calendar-star-regular.svg,Pro,Regular,faCalendarStar
+CalendarStarSolid,FontAwesome%20Library/calendar-star-solid.svg,Pro,Solid,faCalendarStar
+Cancel,FontAwesome%20Library/times-solid.svg,Free,Solid,faTimes
+CancelCircle,FontAwesome%20Library/times-circle-solid.svg,Free,Solid,faTimesCircle
+CaretDown,FontAwesome%20Library/caret-down-solid.svg,Free,Solid,faCaretDown
+Cash,FontAwesome%20Library/money-bill-solid.svg,Free,Solid,faMoneyBill
+Check,FontAwesome%20Library/check-regular.svg,Pro,Regular,faCheck
+CheckCircle,FontAwesome%20Library/check-circle-solid.svg,Free,Solid,faCheckCircle
+Cheers,FontAwesome%20Library/glass-cheers-regular.svg,Pro,Regular,faGlassCheers
+Clipboard,FontAwesome%20Library/clipboard-list-regular.svg,Pro,Regular,faClipboardList
+Clock,FontAwesome%20Library/clock-regular.svg,Free,Regular,faClock
+CopyRegular,FontAwesome%20Library/copy-regular_(1).svg,Free,Regular,faCopy
+CopySolid,FontAwesome%20Library/copy-solid.svg,Free,Solid,faCopy
+CreditCardBack,FontAwesome%20Library/credit-card-solid.svg,Free,Solid,faCreditCard
+CreditCardFront,FontAwesome%20Library/credit-card-front-solid.svg,Pro,Solid,faCreditCardFront
+CrownRegular,FontAwesome%20Library/crown-regular.svg,Pro,Regular,faCrown
+CrownSolid,FontAwesome%20Library/crown-solid.svg,Free,Solid,faCrown
+Cursor,FontAwesome%20Library/i-cursor-solid.svg,Free,Solid,faICursor
+DashboardRegular,FontAwesome%20Library/tachometer-regular.svg,Pro,Regular,faTachometer
+DashboardSolid,FontAwesome%20Library/tachometer-solid.svg,Pro,Solid,faTachometer
+DeleteRegular,FontAwesome%20Library/trash-regular.svg,Pro,Regular,faTrash
+DeleteSolid,FontAwesome%20Library/trash-solid.svg,Free,Solid,faTrash
+Discover,FontAwesome%20Library/cc-discover-brands.svg,Brands,,faCcDiscover
+Dollar,FontAwesome%20Library/dollar-sign-regular.svg,Pro,Regular,faDollarSign
+DownArrow,FontAwesome%20Library/arrow-alt-down-regular.svg,Pro,Regular,faArrowAltDown
+DownloadReport,FontAwesome%20Library/file-download-regular.svg,Pro,Regular,faFileDownload
+Edit,FontAwesome%20Library/edit-regular.svg,Free,Regular,faEdit
+Embed,FontAwesome%20Library/code-regular_(1).svg,Pro,Regular,faCode
+EnvelopeSolid,FontAwesome%20Library/envelope-solid.svg,Free,Solid,faEnvelope
+Export,FontAwesome%20Library/file-export-regular.svg,Pro,Regular,faFileExport
+EyeRegular,FontAwesome%20Library/eye-regular.svg,Free,Regular,faEye
+EyeSlashRegular,FontAwesome%20Library/eye-slash-regular_(1).svg,Free,Regular,faEyeSlash
+EyeSolid,FontAwesome%20Library/eye-solid.svg,Free,Solid,faEye
+FeeRegular,FontAwesome%20Library/usd-square-regular.svg,Pro,Regular,faUsdSquare
+FeeSolid,FontAwesome%20Library/usd-square-solid.svg,Pro,Solid,faUsdSquare
+FilterRegular,FontAwesome%20Library/filter-regular.svg,Pro,Regular,faFilter
+GlobeRegular,FontAwesome%20Library/globe-americas-regular.svg,Pro,Regular,faGlobeAmericas
+GraphGrowth,FontAwesome%20Library/chart-line-regular.svg,Pro,Regular,faChartLine
+HelpRegular,FontAwesome%20Library/question-circle-regular.svg,Free,Regular,faQuestionCircle
+HelpSolid,FontAwesome%20Library/question-circle-solid.svg,Free,Solid,faQuestionCircle
+Italic,FontAwesome%20Library/italic-solid.svg,Free,Solid,faItalic
+KeyRegular,FontAwesome%20Library/key-skeleton-regular.svg,Pro,Regular,faKeySkeleton
+KeySolid,FontAwesome%20Library/key-skeleton-solid.svg,Pro,Solid,faKeySkeleton
+LeftChevron,FontAwesome%20Library/chevron-left-regular.svg,Pro,Regular,faChevronLeft
+Link,FontAwesome%20Library/link-regular.svg,Pro,Regular,faLink
+LongRightArrow,FontAwesome%20Library/long-arrow-right-solid.svg,Pro,Solid,faLongArrowRight
+mapPinLight,FontAwesome%20Library/map-marker-alt-light.svg,Pro,Light,faMapMarkerAlt
+Mastercard,FontAwesome%20Library/cc-mastercard-brands.svg,Brands,,faCcMastercard
+MicrophoneRegular,FontAwesome%20Library/microphone-alt-regular.svg,Pro,Regular,faMicrophoneAlt
+MicrophoneSolid,FontAwesome%20Library/microphone-alt-solid.svg,Free,Solid,faMicrophoneAlt
+MinusCircleLight,FontAwesome%20Library/minus-circle-light.svg,Pro,Light,faMinusCircle
+Mobile,FontAwesome%20Library/mobile-alt-solid.svg,Free,Solid,faMobileAlt
+PlusCircle,FontAwesome%20Library/plus-circle-solid.svg,Free,Solid,faPlusCircle
+PlusCircleLight,FontAwesome%20Library/plus-circle-light.svg,Pro,Light,faPlusCircle
+PrintRegular,FontAwesome%20Library/print-regular.svg,Pro,Regular,faPrint
+PrintSolid,FontAwesome%20Library/print-solid.svg,Free,Solid,faPrint
+ReceiptRegular,FontAwesome%20Library/receipt-regular.svg,Pro,Regular,faReceipt
+ReceiptSolid,FontAwesome%20Library/receipt-solid.svg,Free,Solid,faReceipt
+ReportRegular,FontAwesome%20Library/file-chart-line-regular.svg,Pro,Regular,faFileChartLine
+ReportSolid,FontAwesome%20Library/file-chart-line-solid.svg,Pro,Solid,faFileChartLine
+RightChevronCircle,FontAwesome%20Library/chevron-circle-right-solid.svg,Free,Solid,faChevronCircleRight
+SadTear,FontAwesome%20Library/sad-tear-regular.svg,Free,Regular,faSadTear
+SearchRegular,FontAwesome%20Library/search-regular.svg,Pro,Regular,faSearch
+SearchSolid,FontAwesome%20Library/search-solid.svg,Free,Solid,faSearch
+Sort,FontAwesome%20Library/sort-solid.svg,Free,Solid,faSort
+SortBy,FontAwesome%20Library/sort-alt-solid.svg,Pro,Solid,faSortAlt
+TicketRegular,FontAwesome%20Library/ticket-alt-regular.svg,Pro,Regular,faTicketAlt
+TicketSolid,FontAwesome%20Library/ticket-alt-solid.svg,Free,Solid,faTicketAlt
+Underline,FontAwesome%20Library/underline-solid.svg,Free,Solid,faUnderline
+Unlock,FontAwesome%20Library/unlock-regular.svg,Pro,Regular,faUnlock
+UpArrow,FontAwesome%20Library/arrow-alt-up-regular.svg,Pro,Regular,faArrowAltUp
+UpgradeRegular,FontAwesome%20Library/arrow-alt-square-up-regular.svg,Pro,Regular,faArrowAltSquareUp
+UpgradeSolid,FontAwesome%20Library/arrow-alt-square-up-solid.svg,Pro,Solid,faArrowAltSquareUp
+Upload,FontAwesome%20Library/upload-regular.svg,Pro,Regular,faUpload
+UserCircle,FontAwesome%20Library/user-circle-solid.svg,Free,Solid,faUserCircle
+UserRegular,FontAwesome%20Library/user-regular.svg,Free,Regular,faUser
+UserSolid,FontAwesome%20Library/user-solid.svg,Free,Solid,faUser
+UsersRegular,FontAwesome%20Library/users-regular.svg,Pro,Regular,faUsers
+UsersSolid,FontAwesome%20Library/users-solid.svg,Free,Solid,faUsers
+VenueRegular,FontAwesome%20Library/landmark-regular.svg,Pro,Regular,faLandmark
+VenueSolid,FontAwesome%20Library/landmark-solid.svg,Free,Solid,faLandmark
+Visa,FontAwesome%20Library/cc-visa-brands.svg,Brands,,faCcVisa
+Warning,FontAwesome%20Library/exclamation-triangle-solid.svg,Free,Solid,faExclamationTriangle