diff --git a/UNRELEASED.md b/UNRELEASED.md index 650bc540297..9ce618b9817 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -18,6 +18,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Dependency upgrades +- Updated Prettier to v1.18.2 ([#2070](https://github.com/Shopify/polaris-react/pull/2070)) + ### Code quality ### Deprecations diff --git a/scripts/readme-update-version.js b/scripts/readme-update-version.js index 3fc9ff9608b..b1c260fcf77 100644 --- a/scripts/readme-update-version.js +++ b/scripts/readme-update-version.js @@ -9,12 +9,14 @@ const {semverRegExp, readmes} = require('./utilities'); const root = resolve(__dirname, '..'); console.log(`🆕 Updating version in ${readmes.join(', ')}...`); -readmes.map((readme) => resolve(root, readme)).forEach((file) => { - writeFileSync( - file, - readFileSync(file, 'utf8').replace(semverRegExp, newVersion), - ); -}); +readmes + .map((readme) => resolve(root, readme)) + .forEach((file) => { + writeFileSync( + file, + readFileSync(file, 'utf8').replace(semverRegExp, newVersion), + ); + }); console.log(`🏃‍♂️ Running \`git add -A ${readmes.join(' ')}\`...`); const execOpts = {stdio: 'inherit'}; diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx index 97d652b4491..a51e375f8bd 100644 --- a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx +++ b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx @@ -184,15 +184,13 @@ export class ComboBox extends React.PureComponent { } = this.props; const {comboBoxId, navigableOptions, selectedOptions} = this.state; - const actionsBeforeMarkup = actionsBefore && - actionsBefore.length > 0 && ( - - ); + const actionsBeforeMarkup = actionsBefore && actionsBefore.length > 0 && ( + + ); - const actionsAfterMarkup = actionsAfter && - actionsAfter.length > 0 && ( - - ); + const actionsAfterMarkup = actionsAfter && actionsAfter.length > 0 && ( + + ); const optionsMarkup = options.length > 0 && ( ) : null; - const errorMarkup = error && - typeof error !== 'boolean' && ( -
- -
- ); + const errorMarkup = error && typeof error !== 'boolean' && ( +
+ +
+ ); const descriptionMarkup = helpTextMarkup || errorMarkup ? ( diff --git a/src/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/ContextualSaveBar/ContextualSaveBar.tsx index bb177a1fa90..5f7608255b8 100644 --- a/src/components/ContextualSaveBar/ContextualSaveBar.tsx +++ b/src/components/ContextualSaveBar/ContextualSaveBar.tsx @@ -18,30 +18,24 @@ export const ContextualSaveBar = React.memo(function ContextualSaveBar({ }: ContextualSaveBarProps) { const {setContextualSaveBar, removeContextualSaveBar} = useFrame(); - React.useEffect( - () => { - setContextualSaveBar({ - message, - saveAction, - discardAction, - alignContentFlush, - }); - }, - [ + React.useEffect(() => { + setContextualSaveBar({ message, saveAction, discardAction, alignContentFlush, - setContextualSaveBar, - ], - ); + }); + }, [ + message, + saveAction, + discardAction, + alignContentFlush, + setContextualSaveBar, + ]); - React.useEffect( - () => { - return removeContextualSaveBar; - }, - [removeContextualSaveBar], - ); + React.useEffect(() => { + return removeContextualSaveBar; + }, [removeContextualSaveBar]); return null; }); diff --git a/src/components/DropZone/README.md b/src/components/DropZone/README.md index d65a08b065d..ee26e90c586 100755 --- a/src/components/DropZone/README.md +++ b/src/components/DropZone/README.md @@ -178,9 +178,7 @@ class DropZoneExample extends React.Component { {rejectedFiles.map((file, index) => ( - {`"${ - file.name - }" is not supported. File type must be .gif, .jpg, .png or .svg.`} + {`"${file.name}" is not supported. File type must be .gif, .jpg, .png or .svg.`} ))} diff --git a/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx b/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx index f902eb49cd6..0e58e1b1cfc 100644 --- a/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx +++ b/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx @@ -33,23 +33,17 @@ export function CSSAnimation({ const isMounted = useRef(false); const node = useRef(null); - useEffect( - () => { - if (!isMounted.current) return; - transitionStatus === TransitionStatus.Entering && - changeTransitionStatus(TransitionStatus.Entered); - }, - [transitionStatus], - ); + useEffect(() => { + if (!isMounted.current) return; + transitionStatus === TransitionStatus.Entering && + changeTransitionStatus(TransitionStatus.Entered); + }, [transitionStatus]); - useEffect( - () => { - if (!isMounted.current) return; - inProp && changeTransitionStatus(TransitionStatus.Entering); - !inProp && changeTransitionStatus(TransitionStatus.Exiting); - }, - [inProp], - ); + useEffect(() => { + if (!isMounted.current) return; + inProp && changeTransitionStatus(TransitionStatus.Entering); + !inProp && changeTransitionStatus(TransitionStatus.Exiting); + }, [inProp]); useEffect(() => { isMounted.current = true; diff --git a/src/components/Frame/components/ToastManager/ToastManager.tsx b/src/components/Frame/components/ToastManager/ToastManager.tsx index 02695e97c8c..7b78c667ea5 100644 --- a/src/components/Frame/components/ToastManager/ToastManager.tsx +++ b/src/components/Frame/components/ToastManager/ToastManager.tsx @@ -25,32 +25,26 @@ export const ToastManager = memo(function ToastManager({ }: ToastManagerProps) { const toastNodes: React.RefObject[] = []; - const updateToasts = useDeepCallback( - () => { - let targetInPos = 0; - toastMessages.forEach((_, index) => { - const currentToast = toastNodes[index]; - if (!currentToast.current) return; - targetInPos += currentToast.current.clientHeight; - currentToast.current.style.setProperty( - '--toast-translate-y-in', - `-${targetInPos}px`, - ); - currentToast.current.style.setProperty( - '--toast-translate-y-out', - `${-targetInPos + 150}px`, - ); - }); - }, - [toastMessages, toastNodes], - ); + const updateToasts = useDeepCallback(() => { + let targetInPos = 0; + toastMessages.forEach((_, index) => { + const currentToast = toastNodes[index]; + if (!currentToast.current) return; + targetInPos += currentToast.current.clientHeight; + currentToast.current.style.setProperty( + '--toast-translate-y-in', + `-${targetInPos}px`, + ); + currentToast.current.style.setProperty( + '--toast-translate-y-out', + `${-targetInPos + 150}px`, + ); + }); + }, [toastMessages, toastNodes]); - useDeepEffect( - () => { - updateToasts(); - }, - [toastMessages], - ); + useDeepEffect(() => { + updateToasts(); + }, [toastMessages]); const toastsMarkup = toastMessages.map((toast, index) => { const toastNode = createRef(); diff --git a/src/components/Labelled/Labelled.tsx b/src/components/Labelled/Labelled.tsx index c36faadff93..4fdc953eb8a 100644 --- a/src/components/Labelled/Labelled.tsx +++ b/src/components/Labelled/Labelled.tsx @@ -50,12 +50,11 @@ export function Labelled({ ) : null; - const errorMarkup = error && - typeof error !== 'boolean' && ( -
- -
- ); + const errorMarkup = error && typeof error !== 'boolean' && ( +
+ +
+ ); const labelMarkup = label ? (
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index 3887581b420..a89d9073c2e 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -13,31 +13,28 @@ export const Loading = React.memo(function Loading() { const appBridge = useAppBridge(); const {startLoading, stopLoading} = useFrame(); - useEffect( - () => { + useEffect(() => { + if (appBridge == null) { + startLoading(); + } else { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: Using `Loading` in an embedded app is deprecated and will be removed in v5.0. Use `Loading` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/loading', + ); + + appBridgeLoading.current = AppBridgeLoading.create(appBridge); + appBridgeLoading.current.dispatch(AppBridgeLoading.Action.START); + } + + return () => { if (appBridge == null) { - startLoading(); + stopLoading(); } else { - // eslint-disable-next-line no-console - console.warn( - 'Deprecation: Using `Loading` in an embedded app is deprecated and will be removed in v5.0. Use `Loading` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/loading', - ); - - appBridgeLoading.current = AppBridgeLoading.create(appBridge); - appBridgeLoading.current.dispatch(AppBridgeLoading.Action.START); + appBridgeLoading.current && + appBridgeLoading.current.dispatch(AppBridgeLoading.Action.STOP); } - - return () => { - if (appBridge == null) { - stopLoading(); - } else { - appBridgeLoading.current && - appBridgeLoading.current.dispatch(AppBridgeLoading.Action.STOP); - } - }; - }, - [appBridge, startLoading, stopLoading], - ); + }; + }, [appBridge, startLoading, stopLoading]); return null; }); diff --git a/src/components/Navigation/components/Item/Item.tsx b/src/components/Navigation/components/Item/Item.tsx index dcb67adad5c..6086344fbf1 100644 --- a/src/components/Navigation/components/Item/Item.tsx +++ b/src/components/Navigation/components/Item/Item.tsx @@ -88,24 +88,18 @@ export function Item({ const {location, onNavigationDismiss} = useContext(NavigationContext); const [expanded, setExpanded] = useState(false); - const handleResize = useCallback( - () => { - if (!navigationBarCollapsed().matches && expanded) { - setExpanded(false); - } - }, - [expanded], - ); - - useEffect( - () => { - navigationBarCollapsed().addListener(handleResize); - return () => { - navigationBarCollapsed().removeListener(handleResize); - }; - }, - [handleResize], - ); + const handleResize = useCallback(() => { + if (!navigationBarCollapsed().matches && expanded) { + setExpanded(false); + } + }, [expanded]); + + useEffect(() => { + navigationBarCollapsed().addListener(handleResize); + return () => { + navigationBarCollapsed().removeListener(handleResize); + }; + }, [handleResize]); const tabIndex = disabled ? -1 : 0; diff --git a/src/components/Navigation/components/Section/Section.tsx b/src/components/Navigation/components/Section/Section.tsx index 4f450250a34..ae5ddc8cfc3 100644 --- a/src/components/Navigation/components/Section/Section.tsx +++ b/src/components/Navigation/components/Section/Section.tsx @@ -97,22 +97,21 @@ export class Section extends React.Component { const toggleClassName = classNames(styles.Item, styles.RollupToggle); const ariaLabel = rollup && (expanded ? rollup.hide : rollup.view); - const toggleRollup = rollup && - items.length > rollup.after && ( -
- -
- ); + const toggleRollup = rollup && items.length > rollup.after && ( +
+ +
+ ); const activeItemIndex = items.findIndex((item: ItemProps) => { if (!rollup) { @@ -148,15 +147,14 @@ export class Section extends React.Component { const additionalItemsId = createAdditionalItemsId(); - const activeItemsMarkup = rollup && - additionalItems.length > 0 && ( -
  • - -
      {additionalItems}
    -     - {toggleRollup} -
    • - ); + const activeItemsMarkup = rollup && additionalItems.length > 0 && ( +
  • + +
      {additionalItems}
    +     + {toggleRollup} +
    • + ); return (
      diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx b/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx index 90acd470d5d..4419276266c 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx @@ -61,14 +61,13 @@ export function SingleThumb(props: SingleThumbProps) { [`${CSS_VAR_PREFIX}output-factor`]: `${outputFactor}`, }; - const outputMarkup = !disabled && - output && ( - -
      - {clampedValue} -
      -       - ); + const outputMarkup = !disabled && output && ( + +
      + {clampedValue} +
      +       + ); const prefixMarkup = prefix &&
      {prefix}
      ; diff --git a/src/components/ResourceList/components/FilterControl/FilterControl.tsx b/src/components/ResourceList/components/FilterControl/FilterControl.tsx index 3d76087e5cc..09e452812d5 100644 --- a/src/components/ResourceList/components/FilterControl/FilterControl.tsx +++ b/src/components/ResourceList/components/FilterControl/FilterControl.tsx @@ -206,11 +206,10 @@ export function FilterControl({ const {value: appliedFilterValue} = appliedFilter; if (filter.type === FilterType.Select) { - const foundFilterOption = filter.options.find( - (option) => - typeof option === 'string' - ? option === appliedFilterValue - : option.value === appliedFilterValue, + const foundFilterOption = filter.options.find((option) => + typeof option === 'string' + ? option === appliedFilterValue + : option.value === appliedFilterValue, ); if (foundFilterOption) { @@ -222,9 +221,7 @@ export function FilterControl({ if (filter.type === FilterType.DateSelector) { if (filter.key === appliedFilter.key) { - const filterLabelKey = `Polaris.ResourceList.DateSelector.FilterLabelForValue.${ - appliedFilter.value - }`; + const filterLabelKey = `Polaris.ResourceList.DateSelector.FilterLabelForValue.${appliedFilter.value}`; return intl.translationKeyExists(filterLabelKey) ? intl.translate(filterLabelKey) diff --git a/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx b/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx index 2739eaa7940..fefb53435c4 100644 --- a/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx +++ b/src/components/Scrollable/components/ScrollTo/ScrollTo.tsx @@ -6,16 +6,13 @@ export function ScrollTo() { const anchorNode = useRef(null); const scrollToPosition = useContext(ScrollableContext); - useEffect( - () => { - if (!scrollToPosition || !anchorNode.current) { - return; - } + useEffect(() => { + if (!scrollToPosition || !anchorNode.current) { + return; + } - scrollToPosition(anchorNode.current.offsetTop); - }, - [scrollToPosition], - ); + scrollToPosition(anchorNode.current.offsetTop); + }, [scrollToPosition]); const getUniqueId = createUniqueIDFactory(`ScrollTo`); // eslint-disable-next-line jsx-a11y/anchor-is-valid diff --git a/src/components/Sheet/Sheet.tsx b/src/components/Sheet/Sheet.tsx index 6446e7f113e..e7202402502 100644 --- a/src/components/Sheet/Sheet.tsx +++ b/src/components/Sheet/Sheet.tsx @@ -70,13 +70,10 @@ export function Sheet({ [mobile], ); - useEffect( - () => { - handleResize(); - }, + useEffect(() => { + handleResize(); // eslint-disable-next-line react-hooks/exhaustive-deps - [], - ); + }, []); return ( diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index e0aed36f797..7334011b2e8 100644 --- a/src/components/Toast/Toast.tsx +++ b/src/components/Toast/Toast.tsx @@ -24,50 +24,44 @@ export const Toast = React.memo(function Toast(props: ToastProps) { const {showToast, hideToast} = useFrame(); const appBridge = useAppBridge(); - useDeepEffect( - () => { - const { - error, - content, - duration = DEFAULT_TOAST_DURATION, - onDismiss, - } = props; - const toastId = id.current; + useDeepEffect(() => { + const { + error, + content, + duration = DEFAULT_TOAST_DURATION, + onDismiss, + } = props; + const toastId = id.current; - if (appBridge == null) { - showToast({ - id: id.current, - ...props, - }); - } else { - // eslint-disable-next-line no-console - console.warn( - 'Deprecation: Using `Toast` in an embedded app is deprecated and will be removed in v5.0. Use `Toast` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/toast', - ); + if (appBridge == null) { + showToast({ + id: id.current, + ...props, + }); + } else { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: Using `Toast` in an embedded app is deprecated and will be removed in v5.0. Use `Toast` from `@shopify/app-bridge-react` instead: https://help.shopify.com/en/api/embedded-apps/app-bridge/react-components/toast', + ); - appBridgeToast.current = AppBridgeToast.create(appBridge, { - message: content, - duration, - isError: error, - }); + appBridgeToast.current = AppBridgeToast.create(appBridge, { + message: content, + duration, + isError: error, + }); - appBridgeToast.current.subscribe( - AppBridgeToast.Action.CLEAR, - onDismiss, - ); - appBridgeToast.current.dispatch(AppBridgeToast.Action.SHOW); - } + appBridgeToast.current.subscribe(AppBridgeToast.Action.CLEAR, onDismiss); + appBridgeToast.current.dispatch(AppBridgeToast.Action.SHOW); + } - return () => { - if (appBridge == null) { - hideToast({id: toastId}); - } else if (appBridgeToast.current != null) { - appBridgeToast.current.unsubscribe(); - } - }; - }, - [appBridge, props], - ); + return () => { + if (appBridge == null) { + hideToast({id: toastId}); + } else if (appBridgeToast.current != null) { + appBridgeToast.current.unsubscribe(); + } + }; + }, [appBridge, props]); return null; }); diff --git a/src/types.ts b/src/types.ts index f8444e645c1..08018fa639e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -318,8 +318,8 @@ export type DeepPartial = { [P in keyof T]?: T[P] extends Array ? Array> : T[P] extends ReadonlyArray - ? ReadonlyArray> - : DeepPartial + ? ReadonlyArray> + : DeepPartial; }; export type Discard = Pick>; diff --git a/src/utilities/components.tsx b/src/utilities/components.tsx index d5e4da70e35..5fe2f877d5b 100644 --- a/src/utilities/components.tsx +++ b/src/utilities/components.tsx @@ -56,7 +56,7 @@ export function isElementOfType

      ( // filtered by passing `predicate`. export function elementChildren>( children: React.ReactNode, - predicate: ((element: T) => boolean) = () => true, + predicate: (element: T) => boolean = () => true, ): T[] { return React.Children.toArray(children).filter( (child) => React.isValidElement(child) && predicate(child as T), diff --git a/src/utilities/with-app-provider.tsx b/src/utilities/with-app-provider.tsx index 04c792ab66c..a347c8c1f63 100644 --- a/src/utilities/with-app-provider.tsx +++ b/src/utilities/with-app-provider.tsx @@ -32,7 +32,7 @@ export function withAppProvider() { appBridge: useAppBridge(), }; - return ; + return ; }; const FinalComponent = hoistStatics(WithProvider, WrappedComponent); diff --git a/yarn.lock b/yarn.lock index ad50bc04cbb..6d384501f42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13936,9 +13936,9 @@ prettier-linter-helpers@^1.0.0: fast-diff "^1.1.2" prettier@^1.14.3: - version "1.14.3" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895" - integrity sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg== + version "1.18.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea" + integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw== pretty-error@^2.1.1: version "2.1.1"