1.4.0 (#24)

* 1.0.5 fixing the i18n merge issues

* Streamline release

See if skipping node_modules fixes some build issues

* Artifactory (#17)

* 1.1.0 publish to artifactory

* Release 1.1.1 test release

* adding styleguidist beginnings

* adding a little postversion "hook"

* package-lock update

* updating readme a bit

* styleguidist working well in normal template. Not quite finished for the redux template

* removing logs

* updated changelog and fixed package.json reading/cache issue in another place in frontierInit.js

* 1.4.0 - version bump from running `npm version`

Author: joeycozza

CHANGELOG-FRONTIER.md

@@ -1,3 +1,13 @@
+## 1.4.0
+
+#### :rocket: New Feature
+
+- Incorporated Styleguidist by default into the app template
+
+#### :bug: Bug Fix
+
+- Fixed a bug in the frontierInit.js file dealing with package.json not having the correct dependencies after an npm install
+
 ## 1.1.0
 
 #### :rocket: New Feature

README-FRONTIER.md

@@ -9,11 +9,12 @@ npx create-react-app {app-name} --scripts-version @familysearch/react-scripts
 ## How to test your local copy of react-scripts
 
 - We found that creating a new react-app through this command could utilize your local react-scripts
-  - You'll just need to change the path to your react-scripts version.
+  - You'll just need to change the path (after the string "file:") to your react-scripts version.
   - `npx create-react-app cra-test --scripts-version file:create-react-app/packages/react-scripts`
 
 ## How to make a Release
 
 - When the "develop" branch is ready to merge into frontierMaster for a release
-- run `npm version (patch|minor|major)`
-- make a PR to the `frontierMaster` branch and be sure to squash all the commits into a single commit.
+  1. run `npm version (patch|minor|major)` on the develop branch
+     - This will bump the version in the package.json file, and also make a git tag for the commit
+  2. make a PR to the `frontierMaster` branch and be sure to squash all the commits into a single commit.

packages/react-scripts/gitTagForkedStyle.js

@@ -0,0 +1,6 @@
+const { version, upstreamVersion } = require('./package');
+const osUtils = require('./scripts/utils/osUtils');
+
+const command = 'git';
+const args = ['tag', `v${version}-upstream-${upstreamVersion}`];
+osUtils.runExternalCommandSync(command, args);

packages/react-scripts/package-lock.json

@@ -1,13 +1,16 @@
 {
-  "name": "@familysearch/react-scripts",
-  "version": "1.1.1",
-  "craVersion": "2.1.2",
+  "name": "react-scripts",
+  "version": "1.4.0",
+  "upstreamVersion": "2.1.2",
   "description": "Configuration and scripts for Create React App.",
   "repository": "fs-webdev/create-react-app",
   "license": "MIT",
   "engines": {
     "node": ">=6"
   },
+  "scripts": {
+    "postversion": "node gitTagForkedStyle.js"
+  },
   "bugs": {
     "url": "https://github.com/fs-webdev/create-react-app/issues"
   },

packages/react-scripts/package.json

@@ -23,11 +23,11 @@ async function promptForConfig() {
       message: 'What additional features does your app require',
       choices: [
         {
+          name: 'Using a shared Polymer Component within your React App?',
           value: 'polymer',
-          name: 'Using a shared Polymer Component?',
         },
         {
-          name: 'Redux',
+          name: `Redux (Chances are high you don't need this yet)`,
           value: 'redux',
         },
       ],
@@ -55,11 +55,36 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
     'react-router-dom@4.3.1',
     'fs-webdev/exo',
   ];
+
+  const defaultDevModules = ['react-styleguidist@9.0.0-beta4', 'webpack'];
+
   installModulesSync(defaultModules, useYarn);
+  installModulesSync(defaultDevModules, useYarn, true);
+  addStyleguidistScriptsToPackageJson(appPath);
+}
+
+function addStyleguidistScriptsToPackageJson(appPath) {
+  //we read the package.json using fs instead of require() because require() uses the
+  //cached result from earlier, even though the package.json has been updated previously.
+  const appPackage = JSON.parse(
+    fs.readFileSync(path.join(appPath, 'package.json'), 'UTF8')
+  );
+
+  appPackage.scripts.styleguide = 'styleguidist server --open';
+  appPackage.scripts['styleguide:build'] = 'styleguidist build';
+
+  fs.writeFileSync(
+    path.join(appPath, 'package.json'),
+    JSON.stringify(appPackage, null, 2) + os.EOL
+  );
 }
 
 function configurePolymer(appPath, useYarn) {
-  const appPackage = require(path.join(appPath, 'package.json'));
+  //we read the package.json using fs instead of require() because require() uses the
+  //cached result from earlier, even though the package.json has been updated previously.
+  const appPackage = JSON.parse(
+    fs.readFileSync(path.join(appPath, 'package.json'), 'UTF8')
+  );
   appPackage.vendorCopy = [
     {
       from:
@@ -92,12 +117,13 @@ function configurePolymer(appPath, useYarn) {
 
 function injectPolymerCode(appPath) {
   const indexPath = path.join(appPath, 'public/index.html');
+  let indexHtml = fs.readFileSync(indexPath, 'UTF8');
+
   const polymerCode = `
     <script src="%PUBLIC_URL%/vendor/webcomponents-bundle.js"></script>
     <script src="%PUBLIC_URL%/vendor/custom-elements-es5-adapter.js"></script>
  `;
 
-  let indexHtml = fs.readFileSync(indexPath, 'UTF8');
   indexHtml = indexHtml.replace(
     '<!--FRONTIER WEBCOMPONENT LOADER CODE FRONTIER -->',
     polymerCode

packages/react-scripts/scripts/utils/frontierInit.js

@@ -1,21 +1,26 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import ExampleTimestamp from './ExampleTimestamp';
 import logo from './logo.svg';
-import './App.css';
+import styles from './App.module.css';
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
+      <div className={styles.app}>
+        <header className={styles.appHeader}>
+          <img src={logo} className={styles.appLogo} alt="logo" />
           <p>
             Edit <code>src/components/App.jsx</code> and save to reload.
           </p>
-          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+          <a
+            className={styles.appLink}
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Learn Frontier
           </a>
-          <ExampleTimestamp/>
+          <ExampleTimestamp />
         </header>
       </div>
     );

packages/react-scripts/template-redux/src/components/App.jsx

@@ -0,0 +1,23 @@
+For help getting styleguidist to work with redux, read the docs [ there ](https://github.com/styleguidist/react-styleguidist/blob/master/docs/Thirdparties.md#working-with-third-party-libraries)
+
+App Example
+
+```jsx
+// In order to make styleguidist work with redux, we need to setup the
+// store here for App, cause it uses ExampleTimestamp
+
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import rootReducer from '../reducers';
+
+const startState = {
+  example: {
+    timestamp: Date.now(),
+  },
+};
+const store = createStore(rootReducer, startState);
+
+<Provider store={store}>
+  <App />
+</Provider>;
+```

packages/react-scripts/template-redux/src/components/App.md

@@ -1,13 +1,13 @@
-.App {
+.app {
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
+.appLogo {
+  animation: appLogoSpin infinite 20s linear;
   height: 40vmin;
 }
 
-.App-header {
+.appHeader {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -18,11 +18,11 @@
   color: white;
 }
 
-.App-link {
+.appLink {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
+@keyframes appLogoSpin {
   from {
     transform: rotate(0deg);
   }

packages/react-scripts/template-redux/src/components/App.css renamed to packages/react-scripts/template-redux/src/components/App.module.css

@@ -0,0 +1,3 @@
+module.exports = {
+  webpackConfig: require('react-scripts/config/webpack.config'),
+};