prettier

PMET-public · Apr 23, 2020 · a8b24c9 · a8b24c9
1 parent d293729
commit a8b24c9
Show file tree

Hide file tree

Showing 48 changed files with 208 additions and 852 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,12 @@
+## file extensions
+*.*
+!*.css
+!*.js
+!*.json
+!*.jsx
+!*.less
+!*.md
+!*.mdx
+!*.ts
+!*.tsx
+!*.yml
diff --git a/.prettierrc b/.prettierrc
@@ -4,6 +4,6 @@
     "semi": false,
     "singleQuote": true,
     "jsxBracketSameLine": false,
-    "printWidth": 120,
+    "printWidth": 200,
     "arrowParens": "avoid"
 }
diff --git a/bin/lib/new-component.js b/bin/lib/new-component.js
@@ -7,7 +7,7 @@ const templateStory = require('../templates/components/Component.story')
 const templateIndex = require('../templates/components/index')
 
 module.exports = (name, folder = 'components') => {
-    if (! /^[A-Z][a-z]+(?:[A-Z][a-z]+)*$/.test(name)) {
+    if (!/^[A-Z][a-z]+(?:[A-Z][a-z]+)*$/.test(name)) {
         console.error(`⚠️  \x1b[4m${name} \x1b[0mis not a valid component name. Try naming your component with pascal case. i.e. \x1b[4mNewComponent\x1b[0m`)
         return null
     }

diff --git a/bin/lib/writeFile.js b/bin/lib/writeFile.js
@@ -3,11 +3,10 @@ const fs = require('fs')
 
 module.exports = function writeFile(filePath, content) {
     const relativePath = path.relative('.', filePath)
-    if ( fs.existsSync(filePath) ) {
-        console.log(`💥 \x1b[31m${relativePath} \x1b[0malready exists`) 
-    }
-    else {
+    if (fs.existsSync(filePath)) {
+        console.log(`💥 \x1b[31m${relativePath} \x1b[0malready exists`)
+    } else {
         fs.writeFileSync(filePath, content)
-        console.log(`👌 \x1b[32m${relativePath} \x1b[0mcreated`) 
+        console.log(`👌 \x1b[32m${relativePath} \x1b[0mcreated`)
     }
 }
diff --git a/bin/templates/components/Component.js b/bin/templates/components/Component.js
@@ -1,6 +1,7 @@
 const source = require('common-tags').source
 
-module.exports = (Name) => source`
+module.exports = Name =>
+    source`
 
     import React from 'react'
     import { Component } from '../../lib'

diff --git a/bin/templates/components/Component.styled.js b/bin/templates/components/Component.styled.js
@@ -1,6 +1,7 @@
 const source = require('common-tags').source
 
-module.exports = () => source`
+module.exports = () =>
+    source`
     import styled from 'styled-components'
 
     export const Root = styled.div\`

diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx
@@ -22,11 +22,7 @@ type CompoundComponent = {
     Item: Component<AccordionItemProps>
 }
 
-export const Accordion: Component<AccordionProps> & CompoundComponent = ({
-    children,
-    defaultSelected = -1,
-    ...props
-}) => {
+export const Accordion: Component<AccordionProps> & CompoundComponent = ({ children, defaultSelected = -1, ...props }) => {
     const [selected, setSelected] = useState(defaultSelected)
 
     /** Update Selected when prop changes */

diff --git a/components/Breadcrumbs/Breadcrumbs.tsx b/components/Breadcrumbs/Breadcrumbs.tsx
@@ -15,13 +15,7 @@ export type BreadcrumbsProps = {
     >
 }
 
-export const Breadcrumbs: Component<BreadcrumbsProps> = ({
-    loading,
-    divider = '',
-    items = [],
-    prefix = '',
-    ...props
-}) => {
+export const Breadcrumbs: Component<BreadcrumbsProps> = ({ loading, divider = '', items = [], prefix = '', ...props }) => {
     return (
         <Root {...props}>
             {loading ? (

diff --git a/components/BubbleCarousel/BubbleCarousel.tsx b/components/BubbleCarousel/BubbleCarousel.tsx
@@ -22,16 +22,7 @@ export const BubbleCarousel: Component<BubbleCarouselProps> = ({ children, loadi
     const [scrollerRef, setScrollerRef] = useState<MutableRefObject<Element>>()
 
     return (
-        <Root
-            as={Carousel}
-            scrollerRef={setScrollerRef}
-            gap={1.4}
-            show="auto"
-            padding={1.5}
-            snap={false}
-            hideScrollBar
-            {...props}
-        >
+        <Root as={Carousel} scrollerRef={setScrollerRef} gap={1.4} show="auto" padding={1.5} snap={false} hideScrollBar {...props}>
             {loading ? (
                 <>
                     <CarouselItem>

diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -10,14 +10,7 @@ export type ButtonProps = Props<{
     loading?: LoaderProps
 }>
 
-export const Button: Component<ButtonProps> = ({
-    text,
-    children = text,
-    loading,
-    secondary = false,
-    outline = false,
-    ...props
-}) => {
+export const Button: Component<ButtonProps> = ({ text, children = text, loading, secondary = false, outline = false, ...props }) => {
     return (
         <Root $secondary={secondary} $outline={outline} as="button" {...props} disabled={!!loading || props.disabled}>
             {!!loading ? <Loader as="span" {...loading} /> : <span>{children}</span>}

diff --git a/components/Carousel/Carousel.story.tsx b/components/Carousel/Carousel.story.tsx
@@ -15,13 +15,7 @@ const Item = styled.div`
 `
 
 storiesOf('📦 Components/Carousel', module).add('Default', () => (
-    <Carousel
-        padding={number('padding', 4)}
-        gap={number('gap', 2)}
-        show={number('show', 1)}
-        hideScrollBar={boolean('hideScrollBar', false)}
-        snap={boolean('snap', true)}
-    >
+    <Carousel padding={number('padding', 4)} gap={number('gap', 2)} show={number('show', 1)} hideScrollBar={boolean('hideScrollBar', false)} snap={boolean('snap', true)}>
         <Carousel.Item>
             <Item>1</Item>
         </Carousel.Item>

diff --git a/components/Carousel/Carousel.styled.tsx b/components/Carousel/Carousel.styled.tsx
@@ -24,8 +24,7 @@ export const Scroller = styled.div<{
 
     -webkit-overflow-scrolling: touch;
     display: grid;
-    grid-auto-columns: ${props =>
-        props.$show === 'auto' ? 'max-content' : 'calc(100% / var(--show) - var(--padding))'};
+    grid-auto-columns: ${props => (props.$show === 'auto' ? 'max-content' : 'calc(100% / var(--show) - var(--padding))')};
     grid-auto-flow: column;
     grid-gap: var(--gap);
     overflow-x: scroll;

diff --git a/components/Carousel/Carousel.tsx b/components/Carousel/Carousel.tsx
@@ -18,16 +18,7 @@ type CompoundComponent = {
     Item: Component<CarouselItemProps>
 }
 
-export const Carousel: Component<CarouselProps> & CompoundComponent = ({
-    children,
-    gap = 0,
-    padding = 0,
-    show = 1,
-    hideScrollBar = false,
-    snap = true,
-    scrollerRef,
-    ...props
-}) => {
+export const Carousel: Component<CarouselProps> & CompoundComponent = ({ children, gap = 0, padding = 0, show = 1, hideScrollBar = false, snap = true, scrollerRef, ...props }) => {
     const rootElemRef = useRef(null)
     const scrollerElemRef = useRef(null)
     const { height } = useMeasure(rootElemRef)
@@ -40,15 +31,7 @@ export const Carousel: Component<CarouselProps> & CompoundComponent = ({
 
     return (
         <Root ref={rootElemRef} $height={!hideScrollBar ? height : undefined}>
-            <Scroller
-                ref={scrollerElemRef}
-                $padding={childrenCount > 1 ? padding : 0}
-                $show={show}
-                $gap={gap}
-                $hideScrollBar={hideScrollBar}
-                $snap={snap}
-                {...props}
-            >
+            <Scroller ref={scrollerElemRef} $padding={childrenCount > 1 ? padding : 0} $show={show} $gap={gap} $hideScrollBar={hideScrollBar} $snap={snap} {...props}>
                 {children}
             </Scroller>
         </Root>

diff --git a/components/CartList/CartList.tsx b/components/CartList/CartList.tsx
@@ -1,19 +1,6 @@
 import React from 'react'
 import { Component, Props } from '../../lib'
-import {
-    Root,
-    Product,
-    Thumbnail,
-    DetailsWrapper,
-    Title,
-    Price,
-    Quantity,
-    Sku,
-    Options,
-    Option,
-    OptionLabel,
-    OptionValue,
-} from './CartList.styled'
+import { Root, Product, Thumbnail, DetailsWrapper, Title, Price, Quantity, Sku, Options, Option, OptionLabel, OptionValue } from './CartList.styled'
 import PriceComponent, { PriceProps } from '../Price'
 import Image, { ImageProps } from '../Image'
 import QuantityComponent, { QuantityProps } from '../Quantity'
@@ -47,14 +34,7 @@ export const CartList: Component<CartListProps> = ({ loading, items, children, .
             {items?.map(({ _id, title, sku, thumbnail, price, quantity, options }, index) => (
                 <Product key={_id || index}>
                     <Thumbnail>
-                        <Image
-                            vignette={8}
-                            transition
-                            width="100%"
-                            height="auto"
-                            lazyload={{ offsetY: 100 }}
-                            {...thumbnail}
-                        />
+                        <Image vignette={8} transition width="100%" height="auto" lazyload={{ offsetY: 100 }} {...thumbnail} />
                     </Thumbnail>
                     <DetailsWrapper>
                         <Title {...title}>{title.text}</Title>

diff --git a/components/CartSummary/CartSummary.styled.tsx b/components/CartSummary/CartSummary.styled.tsx
@@ -1,9 +1,5 @@
 import styled from 'styled-components'
-import {
-    Button as AccordionButton,
-    Content as AccordionContent,
-    ButtonLabel as AccordionLabel,
-} from '../Accordion/Accordion.styled'
+import { Button as AccordionButton, Content as AccordionContent, ButtonLabel as AccordionLabel } from '../Accordion/Accordion.styled'
 
 export const Root = styled.div`
     display: grid;

diff --git a/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx b/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
@@ -16,15 +16,7 @@ export type ApplyCouponFormProps = FormProps<ApplyCouponFormPayload> & {
     error?: string
 }
 
-export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({
-    field,
-    loading = false,
-    onSubmit,
-    submitButton,
-    submitting = false,
-    error,
-    ...props
-}) => {
+export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({ field, loading = false, onSubmit, submitButton, submitting = false, error, ...props }) => {
     return (
         <Root as={Form} onSubmit={onSubmit} {...props}>
             <Input loading={loading} rules={{ required: true }} disabled={submitting} error={error} {...field} />

diff --git a/components/Checkout/ContactInfoForm/ContactInfoForm.tsx b/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
@@ -1,19 +1,6 @@
 import React, { useCallback } from 'react'
 import { Component } from '../../../lib'
-import {
-    Root,
-    Email,
-    FirstName,
-    LastName,
-    Company,
-    Address1,
-    Address2,
-    City,
-    Country,
-    Region,
-    PostalCode,
-    PhoneNumber,
-} from './ContactInfoForm.styled'
+import { Root, Email, FirstName, LastName, Company, Address1, Address2, City, Country, Region, PostalCode, PhoneNumber } from './ContactInfoForm.styled'
 
 import Form, { FormProps, Input, InputProps, Select, SelectProps, FormError, patterns } from '../../Form'
 import Button, { ButtonProps } from '../../Button'
@@ -56,18 +43,7 @@ export type ContactInfoFormProps = FormProps<ContactInfoFormPayload> & {
     error?: string
 }
 
-export const ContactInfoForm: Component<ContactInfoFormProps> = ({
-    edit = false,
-    fields,
-    submitButton,
-    editButton,
-    onSubmit,
-    onEdit,
-    loading,
-    submitting,
-    error,
-    ...props
-}) => {
+export const ContactInfoForm: Component<ContactInfoFormProps> = ({ edit = false, fields, submitButton, editButton, onSubmit, onEdit, loading, submitting, error, ...props }) => {
     const handleOnClickEdit = useCallback(
         (e: Event) => {
             e.preventDefault()
@@ -84,12 +60,7 @@ export const ContactInfoForm: Component<ContactInfoFormProps> = ({
         <Form autoComplete={props.disabled ? 'off' : 'on'} onSubmit={onSubmit} {...props}>
             <Root $preview={!edit}>
                 <Email>
-                    <Input
-                        loading={loading}
-                        rules={{ required: true, pattern: patterns.email }}
-                        disabled={disabled}
-                        {...email}
-                    />
+                    <Input loading={loading} rules={{ required: true, pattern: patterns.email }} disabled={disabled} {...email} />
                 </Email>
                 <FirstName>
                     <Input loading={loading} rules={{ required: true }} disabled={disabled} {...firstName} />
@@ -129,11 +100,7 @@ export const ContactInfoForm: Component<ContactInfoFormProps> = ({
 
             {error && <FormError>{error}</FormError>}
 
-            {edit ? (
-                <Button type="submit" loading={loading || submitting} {...submitButton} />
-            ) : (
-                <Button type="button" outline onClick={handleOnClickEdit} {...editButton} />
-            )}
+            {edit ? <Button type="submit" loading={loading || submitting} {...submitButton} /> : <Button type="button" outline onClick={handleOnClickEdit} {...editButton} />}
         </Form>
     )
 }
diff --git a/components/Checkout/PaymentMethodForm/PaymentMethodForm.styled.tsx b/components/Checkout/PaymentMethodForm/PaymentMethodForm.styled.tsx
@@ -19,22 +19,14 @@ export const Root = styled.div`
         display: none;
     }
 
-    &
-        .braintree-sheet__content--form
-        .braintree-form__field-group
-        .braintree-form__field
-        .braintree-form__hosted-field {
+    & .braintree-sheet__content--form .braintree-form__field-group .braintree-form__field .braintree-form__hosted-field {
         border-top: none;
         border-left: none;
         border-right: none;
         border-bottom: 0.1rem solid ${props => props.theme.colors.primary25};
     }
 
-    &
-        .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--has-error
-        .braintree-form__field
-        .braintree-form__hosted-field {
+    & .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--has-error .braintree-form__field .braintree-form__hosted-field {
         border-bottom-color: ${props => props.theme.colors.error};
     }
 
@@ -63,16 +55,9 @@ export const Root = styled.div`
         color: ${props => props.theme.colors.onSurface};
     }
 
-    &
-        .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--card-type-known
-        .braintree-form__field-secondary-icon,
-    .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--has-error
-        .braintree-form__field-error-icon,
-    .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--is-focused
-        .braintree-form__field-secondary-icon {
+    & .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--card-type-known .braintree-form__field-secondary-icon,
+    .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--has-error .braintree-form__field-error-icon,
+    .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--is-focused .braintree-form__field-secondary-icon {
         display: none;
     }
 `

diff --git a/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx b/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
@@ -111,15 +111,7 @@ const reducer: Reducer<ReducerState, ReducerActions> = (state, action) => {
     }
 }
 
-export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
-    submitting,
-    error,
-    braintree,
-    submitButton,
-    editButton,
-    onSubmit,
-    ...props
-}) => {
+export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({ submitting, error, braintree, submitButton, editButton, onSubmit, ...props }) => {
     const { colors } = useTheme()
 
     const containerElem = useRef(null)
@@ -218,11 +210,7 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
 
             {(error || formError) && <FormError>{error || formError}</FormError>}
 
-            {submitting || loading || editable ? (
-                <Button type="submit" loading={submitting || loading} {...submitButton} />
-            ) : (
-                <Button outline onClick={handleOnEdit} {...editButton} />
-            )}
+            {submitting || loading || editable ? <Button type="submit" loading={submitting || loading} {...submitButton} /> : <Button outline onClick={handleOnEdit} {...editButton} />}
         </Root>
     )
 }