Merge pull request #153 from reactioncommerce/fix-152-mikemurray-fix-…

…root-exports

fix: Package root level exports

.reaction/scripts/templates/Component.test.js.template

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "../../tests/index.js";
+import { render } from "../tests/index.js";
 import COMPONENT from "./COMPONENT";
 
 test("basic snapshot - only default props", () => {

docs/component-development-guidelines.md

@@ -61,7 +61,7 @@ This will merge components from a components context provider into the `componen
 (3) Use mockComponents in your tests
 
 ```js
-import mockComponents from "../../../tests/mockComponents";
+import mockComponents from "../../tests/mockComponents";
 ```
 
 Everywhere you render your component in a Jest test function:

package/package.json

@@ -13,7 +13,7 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "prebuild": "rimraf dist/**/* && rimraf dist-modules-temp && node ./scripts/prebuild.js",
+    "prebuild": "rimraf dist/**/* && rimraf dist-modules-temp",
     "build": "npm run build:common && npm run build:modules",
     "build:common": "BABEL_ENV=production babel --root-mode upward src --out-dir dist",
     "build:modules": "BABEL_ENV=production BABEL_MODULES=1 babel --root-mode upward src --out-dir dist-modules-temp",

package/scripts/postbuild.js

@@ -3,11 +3,9 @@
 
 const path = require("path");
 const fse = require("fs-extra");
-const replaceInFiles = require("replace-in-files");
 
 const DIST_FOLDER = path.join(process.cwd(), "dist");
 const DIST_MODULES_FOLDER = path.join(process.cwd(), "dist-modules-temp");
-const COMPONENTS_FOLDER = path.join(DIST_FOLDER, "components");
 
 /**
  * @summary Recursively changes all files with one extension to another
@@ -64,26 +62,6 @@ async function createPackageFile() {
   return newPackageData;
 }
 
-/**
- * @summary After a component has been moved to `dist` and flattened,
- *   change all "../../../utils" to "../../utils"
- * @param {String} componentFolderPath The full path to the components folder
- * @returns {Promise<undefined>} Nothing
- */
-async function replaceUtilsPathForComponent(componentFolderPath) {
-  await replaceInFiles({
-    files: `${componentFolderPath}/**/*.js`,
-    from: /\.\.\/\.\.\/utils/g,
-    to: "../utils"
-  });
-
-  await replaceInFiles({
-    files: `${componentFolderPath}/**/*.mjs`,
-    from: /\.\.\/\.\.\/utils/g,
-    to: "../utils"
-  });
-}
-
 /**
  * @summary The main post-build script.
  *   1. Rename all `.js` files in `dist-modules-temp` to `.mjs` extension
@@ -105,24 +83,6 @@ async function run() {
   // Delete `dist-modules-temp`
   await fse.remove(DIST_MODULES_FOLDER);
 
-  // We now have a `dist` folder but we want to remove the extra `components`
-  // folder inside it in order to have flatter import paths. We"ll traverse the `dist/components/*`
-  // folders here and move them up a level.
-  const directoryContents = await fse.readdir(COMPONENTS_FOLDER);
-  const promises = directoryContents.map(async (componentName) => {
-    if (componentName.indexOf(".") !== -1) return Promise.resolve();
-    const componentFolder = path.join(COMPONENTS_FOLDER, componentName);
-    const distComponentFolder = path.join(DIST_FOLDER, componentName);
-    await fse.copy(componentFolder, distComponentFolder);
-
-    // The relative path to global `utils` folder has changed, so do a multi-file search/replace
-    return replaceUtilsPathForComponent(distComponentFolder);
-  });
-  await Promise.all(promises);
-
-  // Then delete `dist/components`
-  await fse.remove(COMPONENTS_FOLDER);
-
   // Then copy the package.json file into the `dist` folder so that we can do `npm publish dist`
   // and thereby remove the `dist` from the import paths, flattening them more.
   await createPackageFile();

package/src/components/ActionMenu/ActionMenu.test.js → package/src/ActionMenu/ActionMenu.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render, waitForElement } from "../../tests/index.js";
+import { fireEvent, render, waitForElement } from "../tests/index.js";
 import ActionMenu from "./ActionMenu";
 
 const options = [{

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "../../tests/index.js";
+import { render } from "../tests/index.js";
 import Button from "./Button";
 
 test("basic snapshot - only default props", () => {

package/src/components/Chip/Chip.test.js → package/src/Chip/Chip.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "../../tests/index.js";
+import { render } from "../tests/index.js";
 import Chip from "./Chip";
 
 test("basic snapshot - only default props", () => {

package/src/components/ConfirmDialog/ConfirmDialog.test.js → package/src/ConfirmDialog/ConfirmDialog.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, fireEvent } from "../../tests/";
+import { render, fireEvent } from "../tests/";
 import Button from "../Button";
 import ConfirmDialog from "./ConfirmDialog";
 import useConfirmDialog from "./helpers/useConfirmDialog";

package/src/components/DataTable/DataTable.test.js → package/src/DataTable/DataTable.test.js

@@ -3,7 +3,7 @@
 /* eslint-disable require-jsdoc */
 /* eslint-disable react/no-multi-comp */
 import React, { useMemo, useCallback, useState } from "react";
-import { fireEvent, render, waitForElement } from "../../tests/index.js";
+import { fireEvent, render, waitForElement } from "../tests/index.js";
 import { getPaginatedData, data } from "./mocks/sampleData";
 import DataTable, { useDataTable } from "./";
 

package/src/components/DataTableFilter/DataTableFilter.test.js → package/src/DataTableFilter/DataTableFilter.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "../../tests/index.js";
+import { render } from "../tests/index.js";
 import DataTableFilter from "./DataTableFilter";
 
 const options = [{

package/src/components/DialogTitle/DialogTitle.test.js → package/src/DialogTitle/DialogTitle.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "../../tests/index.js";
+import { render } from "../tests/index.js";
 import DialogTitle from "./DialogTitle";
 
 test("basic snapshot - only default props", () => {

package/src/components/Select/Select.test.js → package/src/Select/Select.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "../../tests";
+import { render } from "../tests";
 import Select from "./Select";
 
 const options = [

package/src/components/SplitButton/SplitButton.test.js → package/src/SplitButton/SplitButton.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render, waitForElement } from "../../tests/index.js";
+import { fireEvent, render, waitForElement } from "../tests/index.js";
 import SplitButton from "./SplitButton";
 
 const options = [{

package/src/components/TextField/TextField.test.js → package/src/TextField/TextField.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { MenuItem } from "@material-ui/core";
-import { render } from "../../tests/index.js";
+import { render } from "../tests/index.js";
 import TextField from "./TextField";
 
 test("snapshot - singleline", () => {

package/src/components/Toast/Toast.test.js → package/src/Toast/Toast.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "../../tests/index.js";
+import { render } from "../tests/index.js";
 import Toast from "./Toast";
 
 test("basic snapshot - only default props", () => {

package/src/index.js

@@ -1,12 +1,12 @@
-export { default as ActionMenu } from "./components/ActionMenu";
-export { default as Button } from "./components/Button";
-export { default as Chip } from "./components/Chip";
-export { default as ConfirmDialog, ConfirmDialogBase, useConfirmDialog } from "./components/ConfirmDialog";
-export { default as DataTable, useDataTable } from "./components/DataTable";
-export { default as DataTableFilter } from "./components/DataTableFilter";
-export { default as DialogTitle } from "./components/DialogTitle";
-export { default as Select } from "./components/Select";
-export { default as SplitButton } from "./components/SplitButton";
-export { default as TextField } from "./components/TextField";
-export { default as Toast } from "./components/Toast";
+export { default as ActionMenu } from "./ActionMenu";
+export { default as Button } from "./Button";
+export { default as Chip } from "./Chip";
+export { default as ConfirmDialog, ConfirmDialogBase, useConfirmDialog } from "./ConfirmDialog";
+export { default as DataTable, useDataTable } from "./DataTable";
+export { default as DataTableFilter } from "./DataTableFilter";
+export { default as DialogTitle } from "./DialogTitle";
+export { default as Select } from "./Select";
+export { default as SplitButton } from "./SplitButton";
+export { default as TextField } from "./TextField";
+export { default as Toast } from "./Toast";
 export { default as defaultTheme } from "./theme/defaultTheme";

package/src/tests/realComponents.js

@@ -3,7 +3,7 @@
  * available, in order to test event handling and such.
  */
 
-import Button from "../components/Button";
+import Button from "../Button";
 
 export default {
   Button

styleguide.config.js

@@ -1,14 +1,14 @@
 const path = require("path");
 const fs = require("fs");
 
-const componentsDir = path.join(__dirname, "package/src/components");
+const componentsDir = path.join(__dirname, "package/src");
 const componentTree = {};
 
 // Build componentTree from project files
 if (fs.statSync(componentsDir).isDirectory()) {
   const componentItems = fs.readdirSync(componentsDir);
   componentItems.forEach((componentName) => {
-    componentTree[componentName] = path.join("./package/src/components", componentName, `${componentName}.js`);
+    componentTree[componentName] = path.join("./package/src", componentName, `${componentName}.js`);
   });
 }
 

styleguide/src/appComponents.js

@@ -1,4 +1,4 @@
-import Button from "../../package/src/components/Button";
+import Button from "../../package/src/Button";
 
 export default {
   Button

styleguide/src/sections/Card.md

@@ -24,7 +24,7 @@ import { Card, CardHeader, CardContent, Typography } from "@material-ui/core";
 
 ```jsx
 import { Card, CardHeader, CardContent, Typography } from "@material-ui/core";
-import ActionMenu from "../../../package/src/components/ActionMenu";
+import ActionMenu from "../../../package/src/ActionMenu";
 
 const options = [{
   label: "Open"

styleguide/src/sections/QuickEditCard.md

@@ -1,7 +1,7 @@
 ```jsx
 import { Card, CardHeader, CardContent, Grid, IconButton, Typography, Grow, FormControlLabel, Switch } from "@material-ui/core";
 import CloseIcon from "mdi-material-ui/Close";
-import Button from "../../../package/src/components/Button";
+import Button from "../../../package/src/Button";
 
 function GrowCard() {
   const [checked, setChecked] = React.useState(false);