Merge pull request #4 from reactioncommerce/docs-mikemurray-update-li…

…b-references

docs: update catalyst references

.snyk

@@ -1,5 +1,5 @@
 # Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
-version: v1.12.0
+version: v1.13.5
 # ignores vulnerabilities until expiry date; change duration by modifying expiry date
 ignore:
   'npm:hoek:20180212':
@@ -77,5 +77,5 @@ ignore:
   'npm:mem:20180117':
     - libnpx > yargs > os-locale > mem:
         reason: No update available
-        expires: '2019-07-14T20:24:25.499Z'
+        expires: '2019-08-16T03:20:49.029Z'
 patch: {}

README.md

@@ -1,20 +1,22 @@
-# Reaction Component Library & Design System
+# Reaction Catalyst Component Library
 
-[![npm (scoped)](https://img.shields.io/npm/v/@reactioncommerce/components.svg)](https://www.npmjs.com/package/@reactioncommerce/catalyst)
+[![npm (scoped)](https://img.shields.io/npm/v/@reactioncommerce/catalyst.svg)](https://www.npmjs.com/package/@reactioncommerce/catalyst)
  [![CircleCI](https://circleci.com/gh/reactioncommerce/catalyst.svg?style=svg)](https://circleci.com/gh/reactioncommerce/catalyst)
 
 ![Reaction Design System](https://blog.reactioncommerce.com/content/images/2018/09/style-guide-artwork.jpg)
 
+> ⚠️ Warning: This repository is in active development and is not ready for testing or usage.
+
 This is a single project with a package of commerce-focused React UI components and the code for the Reaction Design System website:
 
 - [`@reactioncommerce/catalyst`](https://www.npmjs.com/package/@reactioncommerce/catalyst): See the [package.json](https://github.com/reactioncommerce/catalyst/blob/master/package/package.json) in [`/package`](https://github.com/reactioncommerce/catalyst/tree/master/package) folder.
-- [Reaction Design System](https://designsystem.reactioncommerce.com/): See the root [package.json](https://github.com/reactioncommerce/catalyst/blob/master/package.json).
+- [Catalyst Components](https://catalyst.reactioncommerce.com/): See the root [package.json](https://github.com/reactioncommerce/catalyst/blob/master/package.json).
 
 We use the [React Styleguidist](https://react-styleguidist.js.org/) package to run and build the Reaction Design System website, and running the style guide locally doubles as an interactive playground for developing and testing the components.
 
 ## Use the React components in your project
 
-Refer to the [Reaction Design System docs](https://designsystem.reactioncommerce.com/#!/Using%20Components)
+Refer to the [Reaction Catalyst Components doc](https://catalyst.reactioncommerce.com/#!/Using%20Components)
 
 ## Contribute to this project
 

docs/architecture/decisions/0007-publish-components.md

@@ -4,9 +4,9 @@ Date: 2019-07-12
 
 ## Status
 
-STATUS：accepted
+STATUS：proposal
 
-2019-07-12 accepted
+2019-07-16 proposal
 
 ## Context
 
@@ -44,16 +44,7 @@ There is a further complication here, which is "how does the style guide release
 
 ## Decision
 
-The complexity of setting up, maintaining, and understanding a one-package-per-component approach, even with the help of tools like Lerna, is a very strong con. So if we assume that a single package is our preference, let's look at how we might mitigate the cons of that apprach.
-
-The first con, pulling in unwanted component changes, is MAJOR. This causes a lot of headaches for a lot of people. There are a few things we can do to avoid it:
-
-- Every component change that changes the appearance of a component in any way should be exported as a new component. The whole component folder can be copied into a `v2` folder. That way, any app that pulls in an updated package will not see any changes until they change `import { Button } from "@reactioncommerce/components/v1` to `import { Button } from "@reactioncommerce/components/v2`
+- Use the single-package approach which includes all components into a single package.
 - No React component in this library will import any other React component in this library. All components that a component needs to render will be passed in as props or children.
 - Every component will have Jest snapshot testing, which will give a clue to developers and reviewers that a component's appearance may have changed. Part of the review process can be deciding whether the changes are visual and whether they require splitting off a new version of the component (i.e. are considered "breaking" changes). There is the possibility of automating this even more through automated screen shot comparison.
-
-This approach also answers the question of how the style guide will show all versions of the component. Since all versions will remain in the repo in versioned folder names, they'll just naturally appear.
-
-The second con of a single package can be avoided by the following suggestion:
-
-- Apps using the component package should set up a "tree shaking" solution to avoid bundling any components they do not import.
+- Apps using the Catalyst component package may set up a "tree shaking" solution to avoid bundling any components they do not import.

docs/developing.md

@@ -99,9 +99,9 @@ For this project specifically:
 - You should almost never include "BREAKING CHANGES" because we’re duplicating components to avoid that. Consult with others before doing it.
 - All other prefixes (docs, chore, etc.) do NOT trigger a release.
 
-## Components Package Publication
+## Catalyst Package Publication
 
-The `@reactioncommerce/components` package is automatically published by CI when commits are merged or pushed to the `master` branch. This is done using [semantic-release](https://www.npmjs.com/package/semantic-release), which also determines version bumps based on conventional Git commit messages.
+The `@reactioncommerce/catalyst` package is automatically published by CI when commits are merged or pushed to the `master` branch. This is done using [semantic-release](https://www.npmjs.com/package/semantic-release), which also determines version bumps based on conventional Git commit messages.
 
 ## Style Guide Publication
 
@@ -115,4 +115,4 @@ Be sure to familiarize yourself with the [Repo Structure](./repo-structure.md).
 
 If you're going to create components, learn the [Component Development Guidelines](./component-development-guidelines.md) and read about [Creating a New Component](./creating-new-component.md).
 
-If you're going to work on the Reaction Design System website, check out the [Style Guide Development](./style-guide-development.md) docs.
+If you're going to work on the Reaction Catalyst website, check out the [Style Guide Development](./style-guide-development.md) docs.

package.json

@@ -34,6 +34,10 @@
       "react": {
         "version": "detect"
       }
+    },
+    "rules": {
+      "node/no-unsupported-features/es-syntax": "off",
+      "node/no-unpublished-require": "warn"
     }
   },
   "eslintIgnore": [
@@ -114,7 +118,7 @@
     "@babel/preset-react": "~7.0.0",
     "@commitlint/cli": "~7.0.0",
     "@commitlint/config-conventional": "~7.0.1",
-    "@reactioncommerce/eslint-config": "~1.9.0",
+    "@reactioncommerce/eslint-config": "~2.0.0",
     "adr": "~1.1.1",
     "autoprefixer": "~7.1.6",
     "babel-core": "~7.0.0-bridge.0",
@@ -138,6 +142,7 @@
     "eslint-plugin-import": "~2.15.0",
     "eslint-plugin-jest": "~22.1.3",
     "eslint-plugin-jsx-a11y": "~6.2.0",
+    "eslint-plugin-node": "^9.1.0",
     "eslint-plugin-promise": "~4.0.1",
     "eslint-plugin-react": "~7.12.4",
     "extract-text-webpack-plugin": "~3.0.2",
@@ -182,5 +187,8 @@
   },
   "release": {
     "pkgRoot": "package/dist"
+  },
+  "resolutions": {
+    "**/lodash": "4.17.14"
   }
 }

package/README.md

@@ -1,36 +1,32 @@
-# @reactioncommerce/components
+# @reactioncommerce/catalyst
 
 ## Getting Started
 
 ```bash
-npm install --save react@16.4.2 prop-types@15.6.2 styled-components@3.3.3 reacto-form@0.0.2 @reactioncommerce/components-context@1.0.0 @reactioncommerce/components
+npm install --save react@16.8.6 prop-types@15.6.2 styled-components@3.3.3 @reactioncommerce/components-context@1.2.0 @reactioncommerce/catalyst
 ```
 
 or
 
 ```bash
-yarn add react@16.4.2 prop-types@15.6.2 styled-components@3.3.3 reacto-form@0.0.2 @reactioncommerce/components-context@1.0.0 @reactioncommerce/components
+yarn add react@6.8.6 prop-types@15.6.2 styled-components@3.3.3 @reactioncommerce/components-context@1.2.0 @reactioncommerce/catalyst
 ```
 
-Note that the minimum required React version is 16.4.1 because this package uses newer APIs like `createContext` and `forwardRef`. The `react`, `prop-types`, `@reactioncommerce/components-context`, `reacto-form`, and `styled-components` packages are peer dependencies, which means that you must install the proper versions in your app. They are not included with this package.
-
-> If you use the `StripeForm` component, then you must also install `react-stripe-elements@2.0.1`. It is an optional peer dependency.
+Note that the minimum required React version is 16.8.6 because this package uses newer APIs like `hooks`, `createContext` and `forwardRef`. The `react`, `prop-types`, and `@reactioncommerce/components-context` packages are peer dependencies, which means that you must install the proper versions in your app. They are not included with this package.
 
 Then import a component:
 
 ```js
-import Button from "@reactioncommerce/components/Button/v1";
+import Button from "@reactioncommerce/catalyst/Button";
 ```
 
-Notice that you must specify what version of the component you want. If you update to a newer minor or patch release of the `@reactioncommerce/components` package, none of your components will change by default. You will also have to change where you import them from, for example, change `v1` to `v2`. Occasionally we will release a new major version of the package, and some of the older component versions may disappear.
-
 In your HTML:
 
 ```html
 // Font for display type
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700" rel="stylesheet">
 ```
 
-## SVGs
+## Icons
 
-Several components in this library use [Font Awesome](https://fontawesome.com/) icons in scalable vector graphic format (SVGs), under the [Font Awesome Free License](https://fontawesome.com/license/free).
+Several components in this library use the [Material Design Icons](https://materialdesignicons.com/) [React components](https://github.com/TeamWertarbyte/mdi-material-ui), which are distributed under the [WTFPL License](https://github.com/TeamWertarbyte/mdi-material-ui/blob/master/LICENSE). The icons themselves are distributed under the [SIL OPEN FONT LICENSE Version 1.1](https://github.com/Templarian/MaterialDesign/blob/master/LICENSE).

package/scripts/postbuild.js

@@ -26,6 +26,8 @@ async function recursivelyChangeExtension(fullDirPath, ext, newExt) {
 
     await fse.copy(childPath, childPath.replace(`.${ext}`, `.${newExt}`));
     await fse.remove(childPath);
+
+    return true;
   });
   await Promise.all(promises);
 }

package/src/components/Button/Button.js

@@ -7,7 +7,7 @@ import { withComponents } from "@reactioncommerce/components-context";
  */
 function Button() {
   // Not yet implemented
-  return null;
+  return <button>{"not yet implemented"}</button>;
 }
 
 export default withComponents(Button);

package/src/components/Button/Button.test.js

@@ -1,11 +1,8 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import { mount } from "enzyme";
 import mockComponents from "../../tests/mockComponents";
 import Button from "./Button";
 
-const fakeEvent = { preventDefault() {} };
-
 test("basic snapshot", () => {
   const component = renderer.create(<Button components={mockComponents} title="title" className="a b">Submit</Button>);
 

package/src/components/Button/__snapshots__/Button.test.js.snap

@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`basic snapshot 1`] = `null`;
+exports[`basic snapshot 1`] = `
+<button>
+  not yet implemented
+</button>
+`;

styleguide.config.js

@@ -387,7 +387,7 @@ module.exports = {
   },
   getComponentPathLine(componentPath) {
     const name = path.basename(componentPath, ".js");
-    return `import ${name} from "@reactioncommerce/components/${name}"`;
+    return `import ${name} from "@reactioncommerce/catalyst/${name}"`;
   },
   pagePerSection: true,
   showCode: true,

styleguide/src/sections/Introduction.md

@@ -8,4 +8,4 @@ Our goals for the style guide are threefold:
 
 This style guide is very much a living and evolving document—this is only the beginning. Transparency and constant iteration are core principles of [Reaction Commerce](http://reactioncommerce.com/), and in that spirit, we wanted to share our style guide as soon as possible. Check back often as we continue to iterate and evolve the Reaction Style Guide.
 
-Follow our progress on GitHub at [reactioncommerce/reaction-component-library](https://github.com/reactioncommerce/reaction-component-library/) and NPM at [@reactioncommerce/components] (https://www.npmjs.com/package/@reactioncommerce/components). Read our [project documentation](https://github.com/reactioncommerce/reaction-component-library/blob/master/docs/README.md) for more details.
+Follow our progress on GitHub at [reactioncommerce/catalyst](https://github.com/reactioncommerce/catalyst/) and NPM at [@reactioncommerce/catalyst] (https://www.npmjs.com/package/@reactioncommerce/catalyst). Read our [project documentation](https://github.com/reactioncommerce/catalyst/blob/master/docs/README.md) for more details.

styleguide/src/sections/LocalDevelopment.md

@@ -9,7 +9,7 @@ yarn install
 yarn run build
 ```
 
-- Next, `cd` into the local version of the repository you'd like to use the local `Component Library` inside. Add the following line to the `volumes:` portion of the `docker-compose.yml` file:
+- Next, `cd` into the local version of the repository you'd like to use the local `Catalyst Library` inside. Add the following line to the `volumes:` portion of the `docker-compose.yml` file:
 
 Inside `Reaction Storefront`:
 
@@ -20,18 +20,18 @@ volumes:
   - .:/usr/local/src/reaction-app
   - empty_node_modules:/usr/local/src/reaction-app/node_modules # do not link node_modules in, and persist it between dc up runs
   - node_modules:/usr/local/src/node_modules
-+ - /{Path-to-your-local-repo}/reaction-component-library/package/dist:/usr/local/src/reaction-app/node_modules/@reactioncommerce/components
++ - /{Path-to-your-local-repo}/catalyst/package/dist:/usr/local/src/reaction-app/node_modules/@reactioncommerce/catalyst
 ```
 
-Inside `Reaction Operator UI`:
+Inside `Reaction Catalyst UI`:
 ```diff
 volumes:
   - $HOME/.cache/yarn-offline-mirror:/home/node/.cache/yarn-offline-mirror
   - web-yarn:/home/node/.cache/yarn
   - .:/usr/local/src/reaction-app
   - empty_node_modules:/usr/local/src/reaction-app/node_modules # do not link node_modules in, and persist it between dc up runs
   - node_modules:/usr/local/src/node_modules
-+ - /{Path-to-your-local-repo}/reaction-component-library/package/dist:/usr/local/src/node_modules/@reactioncommerce/components
++ - /{Path-to-your-local-repo}/catalyst/package/dist:/usr/local/src/node_modules/@reactioncommerce/catalyst
 ```
 
 - Next, run `docker-compose up -d` like normal to access the app in your browser and test it.

yarn.lock

@@ -1220,9 +1220,9 @@
   dependencies:
     hoist-non-react-statics "^3.2.0"
 
-"@reactioncommerce/eslint-config@~1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@reactioncommerce/eslint-config/-/eslint-config-1.9.0.tgz#fa8075fa1ac361791567075d94ee6667adc87fd0"
+"@reactioncommerce/eslint-config@~2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@reactioncommerce/eslint-config/-/eslint-config-2.0.0.tgz#239fcdb8ff22b14d7f0629cda3ec7f2400b79b09"
 
 "@semantic-release/commit-analyzer@^6.1.0":
   version "6.2.0"
@@ -4140,6 +4140,13 @@ eslint-plugin-babel@~5.3.0:
   dependencies:
     eslint-rule-composer "^0.3.0"
 
+eslint-plugin-es@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-1.4.0.tgz#475f65bb20c993fc10e8c8fe77d1d60068072da6"
+  dependencies:
+    eslint-utils "^1.3.0"
+    regexpp "^2.0.1"
+
 eslint-plugin-import@~2.15.0:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.15.0.tgz#d8f3c28b8988ccde5df964706faa7c1e52f0602a"
@@ -4173,6 +4180,17 @@ eslint-plugin-jsx-a11y@~6.2.0:
     has "^1.0.3"
     jsx-ast-utils "^2.2.1"
 
+eslint-plugin-node@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-9.1.0.tgz#f2fd88509a31ec69db6e9606d76dabc5adc1b91a"
+  dependencies:
+    eslint-plugin-es "^1.4.0"
+    eslint-utils "^1.3.1"
+    ignore "^5.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.10.1"
+    semver "^6.1.0"
+
 eslint-plugin-promise@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.0.1.tgz#2d074b653f35a23d1ba89d8e976a985117d1c6a2"
@@ -4207,6 +4225,12 @@ eslint-scope@^4.0.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-utils@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
+  dependencies:
+    eslint-visitor-keys "^1.0.0"
+
 eslint-utils@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
@@ -7452,11 +7476,7 @@ lodash.without@~4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
 
-lodash@4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-
-"lodash@>=3.5 <5", lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0:
+lodash@4.17.11, lodash@4.17.14, "lodash@>=3.5 <5", lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.14"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
 
@@ -10541,7 +10561,7 @@ resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.10.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.10.1, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1, resolve@^1.9.0:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
   dependencies:
@@ -10776,7 +10796,7 @@ semver@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.0.0.tgz#05e359ee571e5ad7ed641a6eec1e547ba52dea65"
 
-semver@^6.0.0:
+semver@^6.0.0, semver@^6.1.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"