fixed import and export typos

package.json

@@ -40,13 +40,65 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-storefront": "^8.17.4",
-    "react-visibility-sensor": "^5.1.1"
+    "react-visibility-sensor": "^5.1.1",
+    "chalk": "^3.0.0",
+    "csso": "^4.0.3",
+    "delegate": "^3.2.0",
+    "formidable": "^1.2.1",
+    "glob": "^7.1.6",
+    "next-offline": "^5.0.0",
+    "react-image-magnify": "^2.7.4",
+    "react-swipeable-views": "0.13.3",
+    "react-swipeable-views-utils": "0.13.3",
+    "resize-observer-polyfill": "^1.5.1",
+    "webpack-bundle-analyzer": "^3.7.0",
+    "webpack-clear-require-cache-plugin": "^0.0.5"
   },
   "devDependencies": {
     "babel-plugin-transform-imports": "^2.0.0",
     "dotenv": "^8.2.0",
     "nodemon": "^2.0.2",
-    "prettier": "^1.19.1"
+    "prettier": "^1.19.1",
+    "@babel/cli": "^7.10.0",
+    "@babel/core": "^7.10.0",
+    "@babel/node": "^7.10.0",
+    "@babel/plugin-proposal-class-properties": "^7.10.0",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.10.0",
+    "@babel/preset-react": "^7.10.0",
+    "@material-ui/core": "4.11.2",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/styles": "4.5.2",
+    "@storybook/addon-knobs": "^5.3.13",
+    "@storybook/react": "^5.2.6",
+    "@svgr/webpack": "^4.3.3",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-rewire": "^1.2.0",
+    "create-index": "^2.6.0",
+    "documentation": "moovweb/documentation#feature/preserve-markdown",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "jest": "^25.4.0",
+    "jest-enzyme": "^7.1.2",
+    "jest-fetch-mock": "^3.0.3",
+    "jsdom": "^16.2.2",
+    "next": "^10.0.3",
+    "npm-watch": "^0.6.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.0",
+    "react-docgen": "^5.1.0",
+    "react-dom": "^16.8.0",
+    "service-worker-mock": "^2.0.5",
+    "sync-folders": "^2.0.0",
+    "yalc": "^1.0.0-pre.34"
+  },
+  "peerDependencies": {
+    "@material-ui/core": "4.11.2",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/styles": "4.11.2",
+    "next": "^10.0.3"
   },
   "lint-staged": {
     "*.js": [

rsf/Accordion.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+/**
+ * Accordion which only allows one child `ExpandableSection` to be open at a time
+ *
+ * ```js
+ *  <Accordion>
+ *    <ExpandableSection title="First">
+ *      <div>The first section</div>
+ *    </ExpandableSection>
+ *    <ExpandableSection title="Second">
+ *      <div>The second section</div>
+ *    </ExpandableSection>
+ *    <ExpandableSection title="Third">
+ *      <div>The third section</div>
+ *    </ExpandableSection>
+ *  </Accordion>
+ * ```
+ */
+export default function Accordion({ children }) {
+  if (!children) {
+    return null
+  }
+
+  const [expanded, setExpanded] = useState(() => children.findIndex(child => child.props.expanded))
+
+  return (
+    // wrapped in a Fragment so react-docgen recognizes this as a Component:
+    <>
+      {React.Children.map(children, (child, i) => {
+        return React.cloneElement(child, {
+          expanded: expanded === i,
+          onChange: (e, expanded) => {
+            e.preventDefault()
+            setExpanded(expanded ? i : null)
+          },
+        })
+      })}
+    </>
+  )
+}
+
+Accordion.propTypes = {
+  /**
+   * A list of `ExpandableSection`s that will be controlled.
+   */
+  children: PropTypes.node,
+}

rsf/ActionButton.js

@@ -0,0 +1,95 @@
+import React, { forwardRef } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { Button, Typography } from '@material-ui/core'
+import PropTypes from 'prop-types'
+
+export const styles = theme => ({
+  /**
+   * Styles passed through to the [`Button`](https://material-ui.com/api/button/#css) element's
+   * `label` CSS rule.
+   */
+  label: {
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    textTransform: 'none',
+  },
+  /**
+   * Styles applied to the label container.
+   */
+  caption: {
+    textTransform: 'none',
+    fontWeight: 'bold',
+  },
+  /**
+   * Styles passed through to the [`Button`](https://material-ui.com/api/button/#css) element's
+   * `contained` CSS rule.
+   */
+  button: {
+    boxShadow: 'none',
+    backgroundColor: theme.palette.grey[200],
+  },
+  /**
+   * Styles applied to the values container.
+   */
+  value: {
+    color: theme.palette.text.primary,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipses',
+    marginLeft: '10px',
+  },
+})
+
+const useStyles = makeStyles(styles, { name: 'RSFActionButton' })
+
+/**
+ * This button class displays a label and value.
+ *
+ * Example:
+ *
+ * ```js
+ *  <ActionButton label="Sort" value="Lowest Price" onClick={openSortMenu} />
+ * ```
+ */
+const ActionButton = forwardRef(({ label, value, children, classes = {}, ...props }, ref) => {
+  let { caption, value: valueClasses, button, label: labelClasses, ...otherClasses } = classes
+  classes = useStyles({ classes: { caption, value: valueClasses, button, label: labelClasses } })
+
+  return (
+    <Button
+      ref={ref}
+      variant="contained"
+      classes={{
+        contained: classes.button,
+        label: classes.label,
+        ...otherClasses,
+      }}
+      {...props}
+    >
+      <Typography variant="button" className={classes.caption}>
+        {label}
+      </Typography>
+      <Typography variant="caption" className={classes.value}>
+        {value}
+      </Typography>
+    </Button>
+  )
+})
+
+ActionButton.propTypes = {
+  /**
+   * Override or extend the styles applied to the component. See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * The label to display on the left side of the button.
+   */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * The value to display on the right side of the button.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+}
+
+export default ActionButton

rsf/AppBar.js

@@ -0,0 +1,126 @@
+import React, { useContext } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { AppBar as MUIAppBar, Toolbar, useScrollTrigger, Slide } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import PWAContext from './PWAContext'
+import clsx from 'clsx'
+
+const useStyles = makeStyles(theme => ({
+  /**
+   * Styles applied to the root element.
+   */
+  root: {
+    boxSizing: 'border-box',
+    backgroundColor: theme.palette.background.default,
+    boxShadow: 'none',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    zIndex: theme.zIndex.modal + 10,
+    height: theme.headerHeight,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+  relative: {
+    position: 'relative',
+  },
+  /**
+   * Styles applied to the spacer that fills the height behind the floating toolbar.
+   */
+  spacer: {
+    boxSizing: 'border-box',
+    height: theme.headerHeight,
+  },
+  /**
+   * Styles applied to the `Toolbar` element.
+   */
+  toolbar: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flex: 1,
+  },
+  /**
+   * Styles applied to the offline warning element.
+   */
+  offline: {
+    textAlign: 'center',
+    backgroundColor: '#f34c4c',
+    zIndex: 999999,
+    width: '100vw',
+    color: 'white',
+  },
+}))
+
+export default function AppBar({ children, style, variant, fixed, offlineWarning, classes }) {
+  if (fixed) {
+    variant = 'fixed'
+  }
+
+  const trigger = useScrollTrigger()
+  classes = useStyles({ classes })
+
+  const { offline } = useContext(PWAContext)
+
+  let appBar = (
+    <MUIAppBar
+      className={clsx({
+        [classes.root]: true,
+        [classes.relative]: variant === 'relative',
+      })}
+      style={{
+        ...style,
+      }}
+    >
+      <Toolbar disableGutters className={classes.toolbar}>
+        {children}
+      </Toolbar>
+    </MUIAppBar>
+  )
+
+  if (variant === 'hide') {
+    appBar = (
+      <Slide appear={false} in={!trigger}>
+        {appBar}
+      </Slide>
+    )
+  }
+
+  return (
+    <>
+      {(variant === 'hide' || variant === 'fixed') && <div className={classes.spacer} />}
+      {offline && <div className={classes.offline}>{offlineWarning}</div>}
+      {appBar}
+    </>
+  )
+}
+
+AppBar.propTypes = {
+  /**
+   * Override or extend the styles applied to the component. See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Affixes the AppBar to the top of the viewport. This prop is deprecated.
+   * Use `variant="fixed"` instead.
+   * @deprecated
+   */
+  fixed: PropTypes.bool,
+
+  /**
+   * String or Element to render within the offline warning container at the top of the app.
+   */
+  offlineWarning: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * * relative - The AppBar stays at the top of the page.
+   * * fixed - The AppBar stays at the top of the viewport.
+   * * hide - The same as fixed, but the app bar automatically hides when the user scrolls down.
+   */
+  variant: PropTypes.oneOf(['relative', 'fixed', 'hide']),
+}
+
+AppBar.defaultProps = {
+  offlineWarning: 'Your device lost its internet connection.',
+  variant: 'hide',
+  fixed: false,
+}

rsf/AutoScrollToNewChildren.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState, useRef } from 'react'
+
+/**
+ * A wrapper component which scrolls the first new child into view when
+ * the number of children increases.
+ */
+const AutoScrollToNewChildren = ({ children }) => {
+  const childCount = React.Children.count(children)
+  const [priorChildCount, setPriorChildCount] = useState(childCount)
+  const firstNewChild = useRef(null)
+
+  useEffect(() => {
+    if (!priorChildCount) {
+      setPriorChildCount(childCount)
+    } else if (childCount > priorChildCount) {
+      firstNewChild.current.scrollIntoView({ behavior: 'smooth' })
+      setPriorChildCount(childCount)
+    }
+  }, [childCount, setPriorChildCount, priorChildCount])
+
+  return (
+    // wrapped in a Fragment so react-docgen recognizes this as a Component:
+    <>
+      {React.Children.map(children, (child, index) => {
+        return (
+          <>
+            {child}
+            {index === priorChildCount ? <div ref={firstNewChild} /> : null}
+          </>
+        )
+      })}
+    </>
+  )
+}
+
+export default AutoScrollToNewChildren