🚧 More work on React components

packages/components/package.json

@@ -22,8 +22,7 @@
     "build": "./scripts/build.sh",
     "test": "echo \"components: No tests configured. Perhaps you'd like to do this?\" && exit 0",
     "pubtest": "npm publish --registry http://localhost:6662",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6663"
   },
   "peerDependencies": {
     "react": "^16.4.1",
@@ -43,19 +42,5 @@
   "engines": {
     "node": ">=8.0.0",
     "npm": ">=5"
-  },
-  "dependencies": {
-    "@freesewing/i18n": "0.11.3",
-    "@freesewing/patterns": "0.18.6"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.4.3",
-    "@storybook/addon-actions": "^5.0.10",
-    "@storybook/addon-console": "^1.1.0",
-    "@storybook/addon-links": "^5.0.10",
-    "@storybook/addons": "^5.0.10",
-    "@storybook/react": "^5.0.10",
-    "babel-loader": "^8.0.5",
-    "storybook-addon-material-ui": "^0.9.0-alpha.18"
   }
 }

packages/components/scripts/build.sh

@@ -10,10 +10,10 @@ cd $DIR/../src/
 rm -rf ../../../dist/components
 for d in * ; do {
   cd ..
-  # do something here
   mkdir -p ../../dist/components/$d
+  echo "Building $d"
   rollup -c ./rollup.config.js ./src/$d/index.js -m -o ../../dist/components/$d/index.js -f cjs
-  rollup -c ./rollup.config.js ./src/$d/index.js -m -o ../../dist/components/$d/index.mjs -f es
+  rollup --silent -c ./rollup.config.js ./src/$d/index.js -m -o ../../dist/components/$d/index.mjs -f es
   cd src
 }
 done

packages/components/src/.form/FormFieldChecks/index.js

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormControl from "@material-ui/core/FormControl";
 import FormGroup from "@material-ui/core/FormGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormHelperText from "@material-ui/core/FormHelperText";
 import Checkbox from "@material-ui/core/Checkbox";
 
 const FormFieldChecks = props => {

packages/components/src/.form/index.js

@@ -0,0 +1 @@
+// noop

packages/components/src/DraftConfigurator/DraftSettingLanguage/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../../form/FormFieldList";
+import FormFieldList from "../../.form/FormFieldList";
 import OptionPreamble from "../OptionPreamble";
 import { injectIntl } from "react-intl";
 import { i18n as languages } from "@freesewing/i18n";

packages/components/src/DraftConfigurator/DraftSettingMargin/index.js

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../../form/FormFieldList";
-import FormFieldSlider from "../../form/FormFieldSlider";
-import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
+import FormFieldSlider from "../../.form/FormFieldSlider";
+import { formatMm, roundMm, defaultSa, sliderStep } from "../../.utils";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingMargin = props => {

packages/components/src/DraftConfigurator/DraftSettingOnly/index.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import FormFieldChecks from "../../form/FormFieldChecks";
-import FormFieldList from "../../form/FormFieldList";
-import FormFieldSlider from "../../form/FormFieldSlider";
-import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
+import FormFieldChecks from "../../.form/FormFieldChecks";
+import FormFieldList from "../../.form/FormFieldList";
+import FormFieldSlider from "../../.form/FormFieldSlider";
+import { formatMm, roundMm, defaultSa, sliderStep } from "../../.utils";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingOnly = props => {

packages/components/src/DraftConfigurator/DraftSettingSa/index.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../../form/FormFieldList";
-import FormFieldSlider from "../../form/FormFieldSlider";
-import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
+import FormFieldList from "../../.form/FormFieldList";
+import FormFieldSlider from "../../.form/FormFieldSlider";
+import { formatMm, roundMm, defaultSa, sliderStep } from "../../.utils";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingSa = props => {

packages/components/src/DraftConfigurator/DraftSettingUnits/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import FormFieldList from "../../form/FormFieldList";
+import FormFieldList from "../../.form/FormFieldList";
 import OptionPreamble from "../OptionPreamble";
 
 const DraftSettingUnits = props => {

packages/components/src/DraftConfigurator/DraftSettings/index.js

@@ -1,9 +1,8 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { gistDefaults } from "../../utils";
+import { gistDefaults } from "../../.utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
-import List from "@material-ui/core/List";
 import DraftSettingSa from "../DraftSettingSa";
 import DraftSettingMargin from "../DraftSettingMargin";
 import DraftSettingComplete from "../DraftSettingComplete";

packages/components/src/DraftConfigurator/OptionGroup/index.js

@@ -6,7 +6,7 @@ import Mm from "../PatternOptionMillimeter";
 import Bool from "../PatternOptionBool";
 import List from "../PatternOptionList";
 import Count from "../PatternOptionCount";
-import { optionType } from "../../utils";
+import { optionType } from "../../.utils";
 import { FormattedMessage } from "react-intl";
 import { injectIntl } from "react-intl";
 

packages/components/src/DraftConfigurator/OptionPreamble/index.js

@@ -5,7 +5,6 @@ import DownIcon from "@material-ui/icons/KeyboardArrowDown";
 import ResetIcon from "@material-ui/icons/SettingsBackupRestore";
 import HelpIcon from "@material-ui/icons/Help";
 import { injectIntl } from "react-intl";
-import ListSubheader from "@material-ui/core/ListSubheader";
 
 const OptionPreamble = props => {
   const styles = {

packages/components/src/DraftConfigurator/PatternOptionBool/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldBool from "../../form/FormFieldBool";
+import FormFieldBool from "../../.form/FormFieldBool";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionBool = props => {

packages/components/src/DraftConfigurator/PatternOptionList/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldList from "../../form/FormFieldList";
+import FormFieldList from "../../.form/FormFieldList";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionList = props => {

packages/components/src/DraftConfigurator/PatternOptionMillimeter/index.js

@@ -6,8 +6,8 @@ import {
   roundMmUp,
   roundMmDown,
   formatMm
-} from "../../utils";
-import FormFieldSlider from "../../form/FormFieldSlider";
+} from "../../.utils";
+import FormFieldSlider from "../../.form/FormFieldSlider";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionMillimeter = props => {

packages/components/src/DraftConfigurator/PatternOptionPctDegCount/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import FormFieldSlider from "../../form/FormFieldSlider";
+import FormFieldSlider from "../../.form/FormFieldSlider";
 import OptionPreamble from "../OptionPreamble";
 
 const PatternOptionPctDegCount = props => {

packages/components/src/DraftConfigurator/PatternOptions/index.js

@@ -5,10 +5,9 @@ import Deg from "../PatternOptionDegree";
 import Mm from "../PatternOptionMillimeter";
 import Bool from "../PatternOptionBool";
 import OptionGroup from "../OptionGroup";
-import { optionType, defaultGist, gistDefaults } from "../../utils";
+import { optionType, defaultGist, gistDefaults } from "../../.utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
-import List from "@material-ui/core/List";
 import DownIcon from "@material-ui/icons/KeyboardArrowDown";
 
 const PatternOptions = props => {

packages/components/src/DraftConfigurator/index.js

@@ -5,11 +5,9 @@ import Deg from "./PatternOptionDegree";
 import Mm from "./PatternOptionMillimeter";
 import Bool from "./PatternOptionBool";
 import OptionGroup from "./OptionGroup";
-import { optionType, gistDefaults } from "../utils";
+import { optionType, gistDefaults } from "../.utils";
 import { patternInfo, patternList } from "@freesewing/patterns";
 import { FormattedMessage } from "react-intl";
-import CollapsedIcon from "@material-ui/icons/ArrowDropDown";
-import ExpandedIcon from "@material-ui/icons/ArrowRight";
 import PatternOptions from "./PatternOptions";
 import DraftSettings from "./DraftSettings";
 //import DraftActions from "DraftActions";

packages/components/src/utils/index.js

@@ -1,186 +0,0 @@
-// Needed to use JSX
-import React from "react";
-
-export const smallestImperialStep = 0.396875;
-
-export const roundMm = (val, units) => {
-  if (units === "imperial") return Math.round(val * 1000000) / 1000000;
-  else return Math.round(val * 10) / 10;
-};
-
-export const roundMmDown = (val, units) => {
-  if (units === "imperial") return val - (val % smallestImperialStep);
-  else return Math.floor(val * 10) / 10;
-};
-
-export const roundMmUp = (val, units) => {
-  if (units === "imperial") return val - (val % 0.396875);
-  else return Math.ceil(val * 10) / 10;
-};
-
-const formatImperial = (
-  neg,
-  inch,
-  numo = false,
-  deno = false,
-  format = "html"
-) => {
-  if (format === "html") {
-    if (numo)
-      return (
-        <span>
-          {neg}
-          {inch} <sup>{numo}</sup>/<sub>{deno}</sub>"
-        </span>
-      );
-    else
-      return (
-        <span>
-          {neg}
-          {inch}"
-        </span>
-      );
-  } else {
-    if (numo) return neg + inch;
-    else return neg + inch + " " + numo + "/" + deno;
-  }
-};
-
-export const formatMm = (val, units, format = "html") => {
-  val = roundMm(val);
-  let H = format === "html" ? true : false;
-  if (units === "imperial") {
-    if (val == 0) return formatImperial("", 0, false, false, format);
-    let negative = "";
-    let inches = "";
-    let rest = "";
-    let fraction = val / 25.4;
-    if (fraction < 0) {
-      fraction = fraction * -1;
-      negative = "-";
-    }
-    if (Math.abs(fraction) < 1) rest = fraction;
-    else {
-      inches = Math.floor(fraction);
-      rest = fraction - inches;
-    }
-    let fraction128 = Math.round(rest * 128);
-    if (fraction128 == 0) return formatImperial(negative, inches);
-    if (fraction128 % 64 == 0)
-      return formatImperial(negative, inches, fraction128 / 64, 2);
-    if (fraction128 % 32 == 0)
-      return formatImperial(negative, inches, fraction128 / 32, 4);
-    if (fraction128 % 16 == 0)
-      return formatImperial(negative, inches, fraction128 / 16, 8);
-    if (fraction128 % 8 == 0)
-      return formatImperial(negative, inches, fraction128 / 8, 16);
-    if (fraction128 % 4 == 0)
-      return formatImperial(negative, inches, fraction128 / 4, 32);
-    if (fraction128 % 2 == 0)
-      return formatImperial(negative, inches, fraction128 / 2, 64);
-    return negative + fraction;
-  } else {
-    if (format === "html") return roundMm(val / 10) + "cm";
-    else return roundMm(val / 10);
-  }
-};
-
-export const defaultSa = {
-  imperial: 15.875,
-  metric: 10
-};
-
-export const sliderStep = {
-  metric: 0.1,
-  imperial: 0.396875
-};
-
-export const optionType = option => {
-  if (typeof option === "object") {
-    if (typeof option.pct !== "undefined") return "pct";
-    if (typeof option.mm !== "undefined") return "mm";
-    if (typeof option.deg !== "undefined") return "deg";
-    if (typeof option.count !== "undefined") return "count";
-    if (typeof option.bool !== "undefined") return "bool";
-    if (typeof option.list !== "undefined") return "list";
-    return "unknown";
-  }
-
-  return "constant";
-};
-
-export const defaultGist = {
-  settings: {
-    embed: true,
-    sa: 0,
-    complete: true,
-    paperless: false,
-    locale: "en",
-    units: "metric",
-    margin: 2,
-    options: {}
-  }
-};
-
-export const gistDefaults = (config, gist = { settings: {} }) => {
-  let options = {};
-  for (let option of Object.keys(config.options)) {
-    if (
-      typeof gist.options !== "undefined" &&
-      typeof gist.options[option] !== undefined
-    )
-      options[option] = gist.options[option];
-    else options[option] = optionDefault(config.options[option]);
-  }
-  delete gist.options;
-  let settings = JSON.parse(JSON.stringify(defaultGist.settings));
-  delete settings.locale;
-  delete settings.units;
-  for (let setting of Object.keys(settings)) {
-    if (typeof gist.settings[setting] !== "undefined") {
-      settings[setting] = gist.settings[setting];
-    }
-  }
-  settings.options = options;
-
-  return settings;
-};
-
-export const optionDefault = option => {
-  let type = optionType(option);
-  switch (optionType(option)) {
-    case "constant":
-      return option;
-      break;
-    case "list":
-      return option.dflt;
-      break;
-    default:
-      return option[type];
-  }
-};
-
-export const storage = {
-  set: (key, value, raw) => {
-    if (typeof localStorage === "undefined")
-      throw(new Error("No localStorage support. And we need it. Bailing out."));
-
-    const _key = "fs_" + key;
-
-    if (typeof value === "undefined" || value === null)
-      localStorage.removeItem(_key);
-    else localStorage.setItem(_key, raw ? value : JSON.stringify(value));
-
-    return value;
-  },
-  get: (key, raw) => {
-    if (typeof localStorage === "undefined")
-      throw(new Error("No localStorage support. And we need it. Bailing out."));
-
-    const value = localStorage.getItem("fs_"+key);
-
-    return raw ? value : JSON.parse(value);
-  }
-}
-
-export const cloneObject = src => Object.assign({}, src);

packages/components/src/withGist/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { storage, cloneObject } from "../utils";
+import { storage, cloneObject } from "../.utils";
 
 const withGist = (WrappedComponent, settings={gist:{}, store:false}) => {