Merge branch 'master' into zetlen/rich-content-component

Author: zetlen

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "The core runtime of Magento PWA",
   "license": "(OSL-3.0 OR AFL-3.0)",
   "author": "Magento Commerce",
@@ -56,6 +56,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.5.1",
     "execa": "^0.10.0",
+    "intl": "^1.2.5",
     "jest": "^22.4.3",
     "jest-fetch-mock": "^1.4.1",
     "npm-merge-driver": "^2.3.5",

package.json

@@ -1,82 +1,36 @@
 import { createElement } from 'react';
-import { Provider } from 'react-redux';
-import { render } from 'react-dom';
+import { Provider as ReduxProvider } from 'react-redux';
 import createStore from '../store';
 import MagentoRouter from '../Router';
 
 /**
- * @class
- * @prop {Element} container
- * @prop {ReactElement} element
- * @prop {Store} store
- * @prop {string} apiBase
- * @prop {string} __tmp_webpack_public_path__
+ *
+ * @param {string} apiBase Absolute URL pointing to the GraphQL endpoint
+ * @param {string} __tmp_webpack_public_path__ Temporary hack. Expects the `__webpack_public_path__` value
+ * @returns {{ store: Store, Provider: () => JSX.Element }}
  */
-class Peregrine {
-    /**
-     * Create a Peregrine instance.
-     * @param {object} opts
-     * @param {string} opts.apiBase Base URL for the store's GraphQL API, including host/port
-     * @param {string} opts.__tmp_webpack_public_path__ Temporary until PWA module extends GraphQL API
-     */
-    constructor(opts = {}) {
-        const { apiBase = location.origin, __tmp_webpack_public_path__ } = opts;
-        this.apiBase = apiBase;
-        this.__tmp_webpack_public_path__ =
-            __tmp_webpack_public_path__ &&
-            ensureDirURI(__tmp_webpack_public_path__);
-        if (!__tmp_webpack_public_path__ && process.env.NODE_ENV === 'test') {
-            // Since __tmp_webpack_public_path__ is temporary, we're
-            // defaulting it here in tests to lessen tests that need to change
-            // when this property is removed
-            this.__tmp_webpack_public_path__ = 'https://temporary.com/pub/';
-        }
-        this.store = createStore();
-        this.container = null;
-        this.element = null;
-    }
-
-    /**
-     * Create an instance of the root component, wrapped with store and routing
-     * components.
-     *
-     * @returns {ReactElement}
-     */
-    render() {
-        const { store, apiBase, __tmp_webpack_public_path__ } = this;
-
-        return (
-            <Provider store={store}>
-                <MagentoRouter {...{ apiBase, __tmp_webpack_public_path__ }} />
-            </Provider>
+export default function bootstrap({ apiBase, __tmp_webpack_public_path__ }) {
+    // Remove deprecation warning after 2 version bumps
+    if (process.env.NODE_ENV !== 'production' && this instanceof bootstrap) {
+        throw new Error(
+            'The API for Peregrine has changed. ' +
+                'Please see the Release Notes on Github ' +
+                'for instructions to update your application'
         );
     }
 
-    /**
-     * Render and mount the React tree into a DOM element.
-     *
-     * @param {Element} container The target DOM element.
-     * @param {Function} callback A function called after mounting.
-     * @returns {void}
-     */
-    mount(container) {
-        this.container = container;
-        this.element = this.render();
-
-        render(this.element, ...arguments);
-    }
-
-    /**
-     * Add a reducer (slice) to the store (root).
-     * The store replaces the root reducer with one containing the new slice.
-     *
-     * @param {String} key The name of the slice.
-     * @param {Function} reducer The reducing function.
-     * @returns {void}
-     */
-    addReducer(key, reducer) {
-        this.store.addReducer(key, reducer);
-    }
+    const store = createStore();
+    const routerProps = {
+        apiBase,
+        __tmp_webpack_public_path__: ensureDirURI(__tmp_webpack_public_path__)
+    };
+    const Provider = () => (
+        <ReduxProvider store={store}>
+            <MagentoRouter {...routerProps} />
+        </ReduxProvider>
+    );
+
+    return { store, Provider };
 }
 
 /**
@@ -86,5 +40,3 @@ class Peregrine {
 function ensureDirURI(uri) {
     return uri.endsWith('/') ? uri : uri + '/';
 }
-
-export default Peregrine;

src/Peregrine/Peregrine.js

@@ -1,11 +1,9 @@
-import ReactDOM from 'react-dom';
 import { createElement } from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-
-import Peregrine from '..';
-
-jest.mock('react-dom');
+import { Provider as ReduxProvider } from 'react-redux';
+import MagentoRouter from '../../Router';
+import bootstrap from '..';
 
 configure({ adapter: new Adapter() });
 
@@ -25,59 +23,29 @@ afterAll(() => {
     }
 });
 
-test('Constructs a new Peregrine instance', () => {
-    const received = new Peregrine();
-
-    expect(received).toMatchObject(
-        expect.objectContaining({
-            store: expect.objectContaining({
-                dispatch: expect.any(Function),
-                getState: expect.any(Function)
-            })
-        })
-    );
+test('Throws descriptive error when using former API', () => {
+    const fn = () => new bootstrap({});
+    expect(fn).toThrowError(/The API for Peregrine has changed/);
 });
 
-test('Renders a Peregrine instance', () => {
-    const app = new Peregrine();
-    const wrapper = shallow(app.render());
-    expect(wrapper.find('MagentoRouter')).toHaveLength(1);
-});
-
-test('Mounts a Peregrine instance', () => {
-    const container = document.createElement('div');
-    const received = new Peregrine();
-
-    received.mount(container);
-    expect(ReactDOM.render).toHaveBeenCalledWith(expect.anything(), container);
-});
-
-test('Adds a reducer to the store', () => {
-    const expected = {};
-    const app = new Peregrine();
-    const fooReducer = (state = null, { type }) =>
-        type === 'bar' ? expected : state;
-
-    app.addReducer('foo', fooReducer);
-    const received = app.store.getState().foo;
-    expect(received).toBe(null);
-
-    app.store.dispatch({ type: 'bar' });
-    const next = app.store.getState().foo;
-    expect(next).toBe(expected);
-});
-
-// https://github.com/magento-research/venia-pwa-concept/pull/57
-test('__tmp_webpack_public_path__ is normalized to include a trailing / when not present', () => {
-    const app = new Peregrine({
-        __tmp_webpack_public_path__: 'https://foo.bar/test'
+test('Exposes the Redux store', () => {
+    const { store } = bootstrap({
+        apiBase: '/graphql',
+        __tmp_webpack_public_path__: 'foobar'
+    });
+    expect(store).toMatchObject({
+        dispatch: expect.any(Function),
+        getState: expect.any(Function),
+        addReducer: expect.any(Function)
     });
-    expect(app.__tmp_webpack_public_path__).toBe('https://foo.bar/test/');
 });
 
-test('Does not double up trailing slash in __tmp_webpack_public_path__ when one exists', () => {
-    const app = new Peregrine({
-        __tmp_webpack_public_path__: 'https://foo.bar/test/'
+test('Provider includes Redux + Router', () => {
+    const { Provider } = bootstrap({
+        apiBase: '/graphql',
+        __tmp_webpack_public_path__: 'foobar'
     });
-    expect(app.__tmp_webpack_public_path__).toBe('https://foo.bar/test/');
+    const wrapper = shallow(<Provider />);
+    expect(wrapper.find(ReduxProvider).length).toBe(1);
+    expect(wrapper.find(MagentoRouter).length).toBe(1);
 });

src/Peregrine/__tests__/Peregrine.test.js

@@ -0,0 +1,41 @@
+import { createElement, PureComponent, Fragment } from 'react';
+import { number, string, shape } from 'prop-types';
+
+export default class Price extends PureComponent {
+    static propTypes = {
+        value: number.isRequired,
+        currencyCode: string.isRequired,
+        classes: shape({
+            currency: string,
+            integer: string,
+            decimal: string,
+            fraction: string
+        })
+    };
+
+    static defaultProps = {
+        classes: {}
+    };
+
+    render() {
+        const { value, currencyCode, classes } = this.props;
+        const parts = Intl.NumberFormat(undefined, {
+            style: 'currency',
+            currency: currencyCode
+        }).formatToParts(value);
+
+        return (
+            <Fragment>
+                {parts.map((part, i) => {
+                    const partClass = classes[part.type];
+                    const key = `${i}-${part.value}`;
+                    return (
+                        <span key={key} className={partClass}>
+                            {part.value}
+                        </span>
+                    );
+                })}
+            </Fragment>
+        );
+    }
+}

src/Price/Price.js

@@ -0,0 +1,28 @@
+# Price
+
+The `Price` component is used anywhere a price is rendered in PWA Studio.
+
+Formatting of prices and currency symbol selection is handled entirely by the ECMAScript Internationalization API available in modern browsers. A [polyfill](https://www.npmjs.com/package/intl) will need to be loaded for any JavaScript runtime that does not have [`Intl.NumberFormat.prototype.formatToParts`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts).
+
+## Usage
+
+```jsx
+import Price from '@peregrine/Price';
+import cssModule from './my-pricing-styles';
+
+<Price value={100.99} currencyCode="USD" classes={cssModule} />;
+/*
+    <span className="curr">$</span>
+    <span className="int">88</span>
+    <span className="dec">.</span>
+    <span className="fract">81</span>
+*/
+```
+
+## Props
+
+| Prop Name      | Required? | Description                                                                                                                                                          |
+| -------------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `classes`      |    ❌     | A classname object.                                                                                                                                                  |
+| `value`        |    ✅     | Numeric price                                                                                                                                                        |
+| `currencyCode` |    ✅     | A string of with any currency code supported by [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) |

src/Price/__docs__/Price.md

@@ -0,0 +1,45 @@
+import { createElement } from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import Price from '../Price';
+import docs from '../__docs__/Price.md';
+
+const stories = storiesOf('Price', module);
+
+stories.add(
+    'USD',
+    withReadme(docs, () => <Price value={100.99} currencyCode="USD" />)
+);
+
+stories.add(
+    'EUR',
+    withReadme(docs, () => <Price value={100.99} currencyCode="EUR" />)
+);
+
+stories.add(
+    'JPY',
+    withReadme(docs, () => <Price value={100.99} currencyCode="JPY" />)
+);
+
+stories.add(
+    'Custom Styles',
+    withReadme(docs, () => {
+        const classes = {
+            currency: 'curr',
+            integer: 'int',
+            decimal: 'dec',
+            fraction: 'fract'
+        };
+        return (
+            <div>
+                <style>{`
+                    .curr { color: green; font-weight: bold; }
+                    .int { color: red; }
+                    .dec { color: black; }
+                    .fract { color: blue; }
+                `}</style>
+                <Price value={100.99} currencyCode="USD" classes={classes} />
+            </div>
+        );
+    })
+);