@khanacademy/wonder-blocks-core 4.6.1 → 4.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-core
 
+## 4.7.0
+
+### Minor Changes
+
+-   91cb727c: Convert enums to POJOs
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+
+## 4.6.2
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+
 ## 4.6.1
 
 ## 4.6.0

package/dist/es/index.js

@@ -196,11 +196,11 @@ View.defaultProps = {
   tag: "div"
 };
 
-const RenderState = require("flow-enums-runtime")({
+const RenderState = {
   Root: "root",
   Initial: "initial",
   Standard: "standard"
-});
+};
 const RenderStateContext = React.createContext(RenderState.Root);
 
 class WithSSRPlaceholder extends React.Component {

package/dist/index.js

@@ -0,0 +1,550 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var React = require('react');
+var aphrodite = require('aphrodite');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function flatten(list) {
+  const result = [];
+
+  if (!list) {
+    return result;
+  } else if (Array.isArray(list)) {
+    for (const item of list) {
+      result.push.apply(result, flatten(item));
+    }
+  } else {
+    result.push(list);
+  }
+
+  return result;
+}
+
+function processStyleList(style) {
+  const stylesheetStyles = [];
+  const inlineStyles = [];
+
+  if (!style) {
+    return {
+      style: {},
+      className: ""
+    };
+  }
+
+  const shouldInlineStyles = typeof global !== "undefined" && global.SNAPSHOT_INLINE_APHRODITE;
+  flatten(style).forEach(child => {
+    const _definition = child._definition;
+
+    if (_definition != null) {
+      if (shouldInlineStyles) {
+        const def = {};
+
+        for (const [key, value] of Object.entries(_definition)) {
+          def[key.replace(/-[a-z]/g, match => match[1].toUpperCase())] = value;
+        }
+
+        inlineStyles.push(def);
+      } else {
+        stylesheetStyles.push(child);
+      }
+    } else {
+      inlineStyles.push(child);
+    }
+  });
+  const inlineStylesObject = Object.assign.apply(Object, [{}].concat(inlineStyles));
+
+  if (inlineStyles.length > 0 && !shouldInlineStyles) {
+    const inlineStylesStyleSheet = aphrodite.StyleSheet.create({
+      inlineStyles: inlineStylesObject
+    });
+    stylesheetStyles.push(inlineStylesStyleSheet.inlineStyles);
+  }
+
+  return {
+    style: shouldInlineStyles ? inlineStylesObject : {},
+    className: aphrodite.css.apply(void 0, stylesheetStyles)
+  };
+}
+
+const _excluded$2 = ["children", "style", "tag", "testId"];
+const isHeaderRegex = /^h[1-6]$/;
+const styles$1 = aphrodite.StyleSheet.create({
+  text: {
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale"
+  },
+  header: {
+    marginTop: 0,
+    marginBottom: 0
+  }
+});
+class Text extends React__namespace.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      style,
+      tag: Tag,
+      testId
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
+
+    const isHeader = isHeaderRegex.test(Tag);
+    const styleAttributes = processStyleList([styles$1.text, isHeader && styles$1.header, style]);
+    return React__namespace.createElement(Tag, _extends__default["default"]({}, otherProps, {
+      style: styleAttributes.style,
+      className: styleAttributes.className,
+      "data-test-id": testId
+    }), children);
+  }
+
+}
+Text.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$1 = ["className", "style"];
+function addStyle(Component, defaultStyle) {
+  function StyleComponent(props) {
+    const {
+      className,
+      style
+    } = props,
+          tmpOtherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+
+    const otherProps = tmpOtherProps;
+    const reset = typeof Component === "string" ? overrides[Component] : null;
+    const {
+      className: aphroditeClassName,
+      style: inlineStyles
+    } = processStyleList([reset, defaultStyle, style]);
+    return React__namespace.createElement(Component, _extends__default["default"]({}, otherProps, {
+      className: [aphroditeClassName, className].filter(Boolean).join(" "),
+      style: inlineStyles
+    }));
+  }
+
+  return StyleComponent;
+}
+const overrides = aphrodite.StyleSheet.create({
+  button: {
+    margin: 0,
+    "::-moz-focus-inner": {
+      border: 0
+    }
+  }
+});
+
+const _excluded = ["testId", "tag"];
+const styles = aphrodite.StyleSheet.create({
+  default: {
+    alignItems: "stretch",
+    borderWidth: 0,
+    borderStyle: "solid",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    margin: 0,
+    padding: 0,
+    position: "relative",
+    zIndex: 0,
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+const StyledDiv = addStyle("div", styles.default);
+const StyledArticle = addStyle("article", styles.default);
+const StyledAside = addStyle("aside", styles.default);
+const StyledNav = addStyle("nav", styles.default);
+const StyledSection = addStyle("section", styles.default);
+class View extends React__namespace.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      testId,
+      tag
+    } = _this$props,
+          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+
+    const props = _extends__default["default"]({}, restProps, {
+      "data-test-id": testId
+    });
+
+    switch (tag) {
+      case "article":
+        return React__namespace.createElement(StyledArticle, props);
+
+      case "aside":
+        return React__namespace.createElement(StyledAside, props);
+
+      case "nav":
+        return React__namespace.createElement(StyledNav, props);
+
+      case "section":
+        return React__namespace.createElement(StyledSection, props);
+
+      case "div":
+        return React__namespace.createElement(StyledDiv, props);
+
+      default:
+        throw Error(`${tag} is not an allowed value for the 'tag' prop`);
+    }
+  }
+
+}
+View.defaultProps = {
+  tag: "div"
+};
+
+const RenderState = {
+  Root: "root",
+  Initial: "initial",
+  Standard: "standard"
+};
+const RenderStateContext = React__namespace.createContext(RenderState.Root);
+
+class WithSSRPlaceholder extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      mounted: false
+    };
+    this._isTheRootComponent = false;
+  }
+
+  componentDidMount() {
+    if (this._isTheRootComponent) {
+      this.setState({
+        mounted: true
+      });
+    }
+  }
+
+  _renderAsRootComponent() {
+    const {
+      mounted
+    } = this.state;
+    const {
+      children,
+      placeholder
+    } = this.props;
+    this._isTheRootComponent = true;
+
+    if (mounted) {
+      return React__namespace.createElement(RenderStateContext.Provider, {
+        value: RenderState.Standard
+      }, children());
+    }
+
+    if (placeholder) {
+      return React__namespace.createElement(RenderStateContext.Provider, {
+        value: RenderState.Initial
+      }, placeholder());
+    }
+
+    return null;
+  }
+
+  _maybeRender(renderState) {
+    const {
+      children,
+      placeholder
+    } = this.props;
+
+    switch (renderState) {
+      case RenderState.Root:
+        return this._renderAsRootComponent();
+
+      case RenderState.Initial:
+        if (placeholder) {
+          return placeholder();
+        }
+
+        return null;
+
+      case RenderState.Standard:
+        return children();
+    }
+
+    {
+      var _JSON$stringify;
+
+      console.log(`We got a render state we don't understand: "${(_JSON$stringify = JSON.stringify(renderState)) != null ? _JSON$stringify : ""}"`);
+      return this._maybeRender(RenderState.Root);
+    }
+  }
+
+  render() {
+    return React__namespace.createElement(RenderStateContext.Consumer, null, value => this._maybeRender(value));
+  }
+
+}
+
+class UniqueIDFactory {
+  constructor(scope) {
+    this.get = key => {
+      const normalizedKey = key.toLowerCase();
+
+      if (!this._hasValidIdChars(key)) {
+        throw new Error(`Invalid identifier key: ${key}`);
+      }
+
+      return `${this._uniqueFactoryName}-${normalizedKey}`;
+    };
+
+    scope = typeof scope === "string" ? scope : "";
+    const normalizedScope = scope.toLowerCase();
+
+    if (!this._hasValidIdChars(normalizedScope)) {
+      throw new Error(`Invalid factory scope: ${scope}`);
+    }
+
+    this._uniqueFactoryName = `uid-${normalizedScope}-${UniqueIDFactory._factoryUniquenessCounter++}`;
+  }
+
+  _hasValidIdChars(value) {
+    if (typeof value !== "string") {
+      return false;
+    }
+
+    const invalidCharsReplaced = value.replace(/[^\d\w-]/g, "-");
+    return value === invalidCharsReplaced;
+  }
+
+}
+UniqueIDFactory._factoryUniquenessCounter = 0;
+
+class SsrIDFactory {
+  get(id) {
+    return id;
+  }
+
+}
+
+SsrIDFactory.Default = new SsrIDFactory();
+var SsrIDFactory$1 = SsrIDFactory.Default;
+
+class UniqueIDProvider extends React__namespace.Component {
+  _performRender(firstRender) {
+    const {
+      children,
+      mockOnFirstRender,
+      scope
+    } = this.props;
+
+    if (firstRender) {
+      if (mockOnFirstRender) {
+        return children(SsrIDFactory$1);
+      }
+
+      return null;
+    }
+
+    if (!this._idFactory) {
+      this._idFactory = new UniqueIDFactory(scope);
+    }
+
+    return children(this._idFactory);
+  }
+
+  render() {
+    return React__namespace.createElement(WithSSRPlaceholder, {
+      placeholder: () => this._performRender(true)
+    }, () => this._performRender(false));
+  }
+
+}
+
+class IDProvider extends React__namespace.Component {
+  renderChildren(ids) {
+    const {
+      id,
+      children
+    } = this.props;
+    const uniqueId = ids ? ids.get(IDProvider.defaultId) : id;
+
+    if (!uniqueId) {
+      throw new Error("Did not get an identifier factory nor a id prop");
+    }
+
+    return children(uniqueId);
+  }
+
+  render() {
+    const {
+      id,
+      scope
+    } = this.props;
+
+    if (id) {
+      return this.renderChildren();
+    } else {
+      return React__namespace.createElement(UniqueIDProvider, {
+        scope: scope,
+        mockOnFirstRender: true
+      }, ids => this.renderChildren(ids));
+    }
+  }
+
+}
+IDProvider.defaultId = "wb-id";
+
+let serverSide = false;
+var server = {
+  isServerSide: () => serverSide,
+  setServerSide: () => {
+    serverSide = true;
+  }
+};
+
+const useRenderState = () => React.useContext(RenderStateContext);
+
+const useUniqueIdWithMock = scope => {
+  const renderState = useRenderState();
+  const idFactory = React.useRef(null);
+
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === RenderState.Initial) {
+    return SsrIDFactory$1;
+  }
+
+  if (!idFactory.current) {
+    idFactory.current = new UniqueIDFactory(scope);
+  }
+
+  return idFactory.current;
+};
+const useUniqueIdWithoutMock = scope => {
+  const renderState = useRenderState();
+  const idFactory = React.useRef(null);
+
+  if (renderState === RenderState.Root) {
+    throw new Error("Components using useUniqueIdWithoutMock() should be descendants of <RenderStateRoot>");
+  }
+
+  if (renderState === RenderState.Initial) {
+    return null;
+  }
+
+  if (!idFactory.current) {
+    idFactory.current = new UniqueIDFactory(scope);
+  }
+
+  return idFactory.current;
+};
+
+const useForceUpdate = () => {
+  const [, setState] = React__namespace.useState(false);
+  const forceUpdate = React__namespace.useCallback(() => setState(state => !state), []);
+  return forceUpdate;
+};
+
+const useOnMountEffect = callback => {
+  React__namespace.useEffect(callback, []);
+};
+
+const useIsMounted = () => {
+  const isMounted = React__namespace.useRef(false);
+  useOnMountEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return React__namespace.useCallback(() => isMounted.current, []);
+};
+
+const useOnline = () => {
+  const forceUpdate = useForceUpdate();
+  React.useEffect(() => {
+    const handleChange = () => forceUpdate();
+
+    window.addEventListener("online", handleChange);
+    window.addEventListener("offline", handleChange);
+    return () => {
+      window.removeEventListener("online", handleChange);
+      window.removeEventListener("offline", handleChange);
+    };
+  }, [forceUpdate]);
+  return navigator.onLine;
+};
+
+const {
+  useEffect,
+  useState
+} = React__namespace;
+
+const RenderStateRoot = ({
+  children,
+  throwIfNested
+}) => {
+  const [firstRender, setFirstRender] = useState(true);
+  const renderState = useRenderState();
+  useEffect(() => {
+    setFirstRender(false);
+  }, []);
+
+  if (renderState !== RenderState.Root) {
+    if (throwIfNested) {
+      throw new Error("There's already a <RenderStateRoot> above this instance in " + "the render tree.  This instance should be removed.");
+    }
+
+    return children;
+  }
+
+  const value = firstRender ? RenderState.Initial : RenderState.Standard;
+  return React__namespace.createElement(RenderStateContext.Provider, {
+    value: value
+  }, children);
+};
+
+RenderStateRoot.defaultProps = {
+  throwIfNested: true
+};
+
+exports.IDProvider = IDProvider;
+exports.RenderState = RenderState;
+exports.RenderStateRoot = RenderStateRoot;
+exports.Server = server;
+exports.Text = Text;
+exports.UniqueIDProvider = UniqueIDProvider;
+exports.View = View;
+exports.WithSSRPlaceholder = WithSSRPlaceholder;
+exports.addStyle = addStyle;
+exports.useForceUpdate = useForceUpdate;
+exports.useIsMounted = useIsMounted;
+exports.useOnMountEffect = useOnMountEffect;
+exports.useOnline = useOnline;
+exports.useRenderState = useRenderState;
+exports.useUniqueIdWithMock = useUniqueIdWithMock;
+exports.useUniqueIdWithoutMock = useUniqueIdWithoutMock;

package/dist/index.js.flow

@@ -1,2 +1,2 @@
 // @flow
-export * from "../src/index.js";
+export * from "../src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5"
+    "@babel/runtime": "^7.18.6"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -25,7 +24,7 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.6.0"
+    "wb-dev-build-settings": "^0.7.1"
   },
   "author": "",
   "license": "MIT"

package/src/components/__docs__/id-provider.stories.js

@@ -5,7 +5,7 @@ import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 export default {

package/src/components/__docs__/unique-id-provider.stories.js

@@ -8,7 +8,7 @@ import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 export default {

package/src/components/__docs__/view.stories.js

@@ -13,9 +13,9 @@ import {
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
-import viewArgTypes from "./view.argtypes.js";
+import viewArgTypes from "./view.argtypes";
 
 export default {
     title: "Core / View",

package/src/components/__docs__/with-ssr-placeholder.stories.js

@@ -5,7 +5,7 @@ import {Body} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import ComponentInfo from "../../../../../.storybook/components/component-info";
 import {name, version} from "../../../package.json";
 
 export default {

package/src/components/__tests__/id-provider.test.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
 
-import IDProvider from "../id-provider.js";
+import IDProvider from "../id-provider";
 
 const mockIDENTIFIER = `uid-component-0-${IDProvider.defaultId}`;
 

package/src/components/__tests__/render-state-root.test.js

@@ -2,12 +2,8 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
 
-import {RenderStateRoot} from "../render-state-root.js";
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-import {RenderState, RenderStateContext} from "../render-state-context.js";
+import {RenderStateRoot} from "../render-state-root";
+import {RenderState, RenderStateContext} from "../render-state-context";
 
 const {useContext} = React;
 

package/src/components/__tests__/unique-id-provider.test.js

@@ -1,15 +1,15 @@
 // @flow
 import * as React from "react";
-import * as ReactDOMServer from "react-dom/server.js";
+import * as ReactDOMServer from "react-dom/server";
 import {render} from "@testing-library/react";
 
-import View from "../view.js";
+import View from "../view";
 
-import SsrIDFactory from "../../util/ssr-id-factory.js";
-import UniqueIDFactory from "../../util/unique-id-factory.js";
-import UniqueIDProvider from "../unique-id-provider.js";
-import WithSSRPlaceholder from "../with-ssr-placeholder.js";
-import {RenderStateRoot} from "../render-state-root.js";
+import SsrIDFactory from "../../util/ssr-id-factory";
+import UniqueIDFactory from "../../util/unique-id-factory";
+import UniqueIDProvider from "../unique-id-provider";
+import WithSSRPlaceholder from "../with-ssr-placeholder";
+import {RenderStateRoot} from "../render-state-root";
 
 describe("UniqueIDProvider", () => {
     describe("mockOnFirstRender is default (false)", () => {

package/src/components/__tests__/view.test.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import renderer from "react-test-renderer";
 
-import View from "../view.js";
+import View from "../view";
 
 describe("View", () => {
     it("Should set the tag to be section", () => {

package/src/components/__tests__/with-ssr-placeholder.test.js

@@ -1,10 +1,10 @@
 // @flow
 import * as React from "react";
-import * as ReactDOMServer from "react-dom/server.js";
+import * as ReactDOMServer from "react-dom/server";
 import {render} from "@testing-library/react";
 
-import WithSSRPlaceholder from "../with-ssr-placeholder.js";
-import {RenderStateRoot} from "../render-state-root.js";
+import WithSSRPlaceholder from "../with-ssr-placeholder";
+import {RenderStateRoot} from "../render-state-root";
 
 describe("WithSSRPlaceholder", () => {
     describe("client-side rendering", () => {

package/src/components/id-provider.js

@@ -1,9 +1,9 @@
 // @flow
 import * as React from "react";
 
-import UniqueIDProvider from "./unique-id-provider.js";
+import UniqueIDProvider from "./unique-id-provider";
 
-import type {IIdentifierFactory} from "../util/types.js";
+import type {IIdentifierFactory} from "../util/types";
 
 type Props = {|
     /**

package/src/components/render-state-context.js

@@ -1,11 +1,12 @@
 // @flow
 import * as React from "react";
 
-export enum RenderState {
-    Root = "root",
-    Initial = "initial",
-    Standard = "standard",
-}
+// TODO(FEI-5000): Convert to TS enum after all codebases have been migrated
+export const RenderState = {
+    Root: ("root": "root"),
+    Initial: ("initial": "initial"),
+    Standard: ("standard": "standard"),
+};
 
 /**
  * This is the context that tracks who is doing what in our SSR component tree.
@@ -22,5 +23,5 @@ export enum RenderState {
  * standard:
  *   means that we're all now doing non-SSR rendering
  */
-export const RenderStateContext: React.Context<RenderState> =
+export const RenderStateContext: React.Context<$Values<typeof RenderState>> =
     React.createContext(RenderState.Root);

package/src/components/render-state-root.js

@@ -1,12 +1,8 @@
 // @flow
 import * as React from "react";
 
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-import {RenderState, RenderStateContext} from "./render-state-context.js";
-import {useRenderState} from "../hooks/use-render-state.js";
+import {RenderState, RenderStateContext} from "./render-state-context";
+import {useRenderState} from "../hooks/use-render-state";
 
 const {useEffect, useState} = React;
 

package/src/components/text.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {processStyleList} from "../util/util.js";
+import {processStyleList} from "../util/util";
 
-import type {TextViewSharedProps} from "../util/types.js";
+import type {TextViewSharedProps} from "../util/types";
 
 // NOTE(jeresig): We want to leave the props for these open so that we can
 // handle uncommon props for elements (e.g. htmlFor for labels).

package/src/components/unique-id-provider.js

@@ -1,12 +1,12 @@
 // @flow
 import * as React from "react";
 
-import WithSSRPlaceholder from "./with-ssr-placeholder.js";
+import WithSSRPlaceholder from "./with-ssr-placeholder";
 
-import UniqueIDFactory from "../util/unique-id-factory.js";
-import SsrIDFactory from "../util/ssr-id-factory.js";
+import UniqueIDFactory from "../util/unique-id-factory";
+import SsrIDFactory from "../util/ssr-id-factory";
 
-import type {IIdentifierFactory} from "../util/types.js";
+import type {IIdentifierFactory} from "../util/types";
 
 // TODO(FEI-4202): update to use `useUniqueId`
 type Props = {|

package/src/components/view.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import addStyle from "../util/add-style.js";
+import addStyle from "../util/add-style";
 
-import type {TextViewSharedProps} from "../util/types.js";
+import type {TextViewSharedProps} from "../util/types";
 
 const styles = StyleSheet.create({
     // https://github.com/facebook/css-layout#default-values

package/src/components/with-ssr-placeholder.js

@@ -1,12 +1,7 @@
 // @flow
 import * as React from "react";
 
-// TODO(FEI-4202): update to use `useContext(RenderStateContext)`
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-import {RenderState, RenderStateContext} from "./render-state-context.js";
+import {RenderState, RenderStateContext} from "./render-state-context";
 
 /**
  * We use render functions so that we don't do any work unless we need to.
@@ -117,7 +112,7 @@ export default class WithSSRPlaceholder extends React.Component<Props, State> {
         return null;
     }
 
-    _maybeRender(renderState: RenderState): React.Node {
+    _maybeRender(renderState: $Values<typeof RenderState>): React.Node {
         const {children, placeholder} = this.props;
 
         switch (renderState) {

package/src/hooks/__tests__/use-force-update.test.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import {render, act} from "@testing-library/react";
 import {renderHook} from "@testing-library/react-hooks";
 
-import {useForceUpdate} from "../use-force-update.js";
+import {useForceUpdate} from "../use-force-update";
 
 describe("#useForceUpdate", () => {
     it("should return a function", () => {

package/src/hooks/__tests__/use-is-mounted.test.js

@@ -1,7 +1,7 @@
 // @flow
 import {renderHook} from "@testing-library/react-hooks";
 
-import {useIsMounted} from "../use-is-mounted.js";
+import {useIsMounted} from "../use-is-mounted";
 
 describe("useIsMounted", () => {
     it("should return false on first call", () => {

package/src/hooks/__tests__/use-on-mount-effect.test.js

@@ -1,7 +1,7 @@
 // @flow
 import {renderHook} from "@testing-library/react-hooks";
 
-import {useOnMountEffect} from "../use-on-mount-effect.js";
+import {useOnMountEffect} from "../use-on-mount-effect";
 
 describe("#useOnMountEffect", () => {
     it("should call the callback once", () => {

package/src/hooks/__tests__/use-online.test.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import {render, act as reactAct} from "@testing-library/react";
 import {renderHook} from "@testing-library/react-hooks";
 
-import {useOnline} from "../use-online.js";
+import {useOnline} from "../use-online";
 
 describe("useOnline", () => {
     it("should return true when navigator.onLine is true", () => {

package/src/hooks/__tests__/use-render-state.test.js

@@ -3,13 +3,9 @@ import * as React from "react";
 import {renderHook as renderHookOnServer} from "@testing-library/react-hooks/server";
 import {renderHook} from "@testing-library/react-hooks";
 
-import {useRenderState} from "../use-render-state.js";
-import {RenderStateRoot} from "../../components/render-state-root.js";
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-import {RenderState} from "../../components/render-state-context.js";
+import {useRenderState} from "../use-render-state";
+import {RenderStateRoot} from "../../components/render-state-root";
+import {RenderState} from "../../components/render-state-context";
 
 describe("useRenderState", () => {
     test("server-side render returns RenderState.Initial", () => {

package/src/hooks/__tests__/use-unique-id.test.js

@@ -3,10 +3,10 @@ import * as React from "react";
 import {render} from "@testing-library/react";
 import {renderHook} from "@testing-library/react-hooks/server";
 
-import SsrIDFactory from "../../util/ssr-id-factory.js";
-import UniqueIDFactory from "../../util/unique-id-factory.js";
-import {useUniqueIdWithMock, useUniqueIdWithoutMock} from "../use-unique-id.js";
-import {RenderStateRoot} from "../../components/render-state-root.js";
+import SsrIDFactory from "../../util/ssr-id-factory";
+import UniqueIDFactory from "../../util/unique-id-factory";
+import {useUniqueIdWithMock, useUniqueIdWithoutMock} from "../use-unique-id";
+import {RenderStateRoot} from "../../components/render-state-root";
 
 describe("useUniqueIdWithoutMock", () => {
     test("server-side render returns null", () => {

package/src/hooks/use-is-mounted.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 
-import {useOnMountEffect} from "./use-on-mount-effect.js";
+import {useOnMountEffect} from "./use-on-mount-effect";
 
 /**
  * Hook to provide a function for determining component mounted state.

package/src/hooks/use-online.js

@@ -1,6 +1,6 @@
 // @flow
 import {useEffect} from "react";
-import {useForceUpdate} from "./use-force-update.js";
+import {useForceUpdate} from "./use-force-update";
 
 /**
  * Track the online status of the browser.

package/src/hooks/use-render-state.js

@@ -1,8 +1,10 @@
 // @flow
 import {useContext} from "react";
 
-import {RenderStateContext} from "../components/render-state-context.js";
+import {
+    RenderState,
+    RenderStateContext,
+} from "../components/render-state-context";
 
-import type {RenderState} from "../components/render-state-context";
-
-export const useRenderState = (): RenderState => useContext(RenderStateContext);
+export const useRenderState = (): $Values<typeof RenderState> =>
+    useContext(RenderStateContext);

package/src/hooks/use-unique-id.js

@@ -1,19 +1,13 @@
 // @flow
 import {useRef} from "react";
 
-import {useRenderState} from "./use-render-state.js";
-import SsrIDFactory from "../util/ssr-id-factory.js";
-import UniqueIDFactory from "../util/unique-id-factory.js";
+import {useRenderState} from "./use-render-state";
+import SsrIDFactory from "../util/ssr-id-factory";
+import UniqueIDFactory from "../util/unique-id-factory";
 
-import {
-    // TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-    // have fixed:
-    // https://github.com/import-js/eslint-plugin-import/issues/2073
-    // eslint-disable-next-line import/named
-    RenderState,
-} from "../components/render-state-context.js";
+import {RenderState} from "../components/render-state-context";
 
-import type {IIdentifierFactory} from "../util/types.js";
+import type {IIdentifierFactory} from "../util/types";
 
 /**
  * Returns a unique identifier factory.  If the parent component hasn't

package/src/index.js

@@ -1,27 +1,23 @@
 // @flow
-import type {AriaProps, IIdentifierFactory, StyleType} from "./util/types.js";
+import type {AriaProps, IIdentifierFactory, StyleType} from "./util/types";
 
-export {default as Text} from "./components/text.js";
-export {default as View} from "./components/view.js";
-export {default as WithSSRPlaceholder} from "./components/with-ssr-placeholder.js";
-export {default as IDProvider} from "./components/id-provider.js";
-export {default as UniqueIDProvider} from "./components/unique-id-provider.js";
-export {default as addStyle} from "./util/add-style.js";
-export {default as Server} from "./util/server.js";
+export {default as Text} from "./components/text";
+export {default as View} from "./components/view";
+export {default as WithSSRPlaceholder} from "./components/with-ssr-placeholder";
+export {default as IDProvider} from "./components/id-provider";
+export {default as UniqueIDProvider} from "./components/unique-id-provider";
+export {default as addStyle} from "./util/add-style";
+export {default as Server} from "./util/server";
 export {
     useUniqueIdWithMock,
     useUniqueIdWithoutMock,
-} from "./hooks/use-unique-id.js";
-export {useForceUpdate} from "./hooks/use-force-update.js";
-export {useIsMounted} from "./hooks/use-is-mounted.js";
-export {useOnMountEffect} from "./hooks/use-on-mount-effect.js";
-export {useOnline} from "./hooks/use-online.js";
-export {useRenderState} from "./hooks/use-render-state.js";
-export {RenderStateRoot} from "./components/render-state-root.js";
-// TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-// have fixed:
-// https://github.com/import-js/eslint-plugin-import/issues/2073
-// eslint-disable-next-line import/named
-export {RenderState} from "./components/render-state-context.js";
+} from "./hooks/use-unique-id";
+export {useForceUpdate} from "./hooks/use-force-update";
+export {useIsMounted} from "./hooks/use-is-mounted";
+export {useOnMountEffect} from "./hooks/use-on-mount-effect";
+export {useOnline} from "./hooks/use-online";
+export {useRenderState} from "./hooks/use-render-state";
+export {RenderStateRoot} from "./components/render-state-root";
+export {RenderState} from "./components/render-state-context";
 
 export type {AriaProps, IIdentifierFactory, StyleType};

package/src/util/__tests__/add-style.test.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {screen, render} from "@testing-library/react";
 
-import addStyle from "../add-style.js";
+import addStyle from "../add-style";
 
 const StyledDiv = addStyle<"div">("div");
 

package/src/util/__tests__/server.test.js

@@ -1,5 +1,5 @@
 // @flow
-import Server from "../server.js";
+import Server from "../server";
 
 describe("./server.js", () => {
     it("#isServerSide should return false", () => {

package/src/util/__tests__/ssr-id-factory.test.js

@@ -3,7 +3,7 @@ describe("SsrIDFactory", () => {
     test("returns the same id, regardless of client or server render", async () => {
         // Arrange
         const id = "this-is-the-id";
-        const {default: SsrIDFactory} = await import("../ssr-id-factory.js");
+        const {default: SsrIDFactory} = await import("../ssr-id-factory");
 
         // Act
         const result = SsrIDFactory.get(id);

package/src/util/__tests__/unique-id-factory.test.js

@@ -1,5 +1,5 @@
 // @flow
-import UniqueIDFactory from "../unique-id-factory.js";
+import UniqueIDFactory from "../unique-id-factory";
 
 describe("UniqueIDFactory", () => {
     describe("#constructor", () => {

package/src/util/add-style.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {processStyleList} from "./util.js";
+import {processStyleList} from "./util";
 
-import type {StyleType} from "./types.js";
+import type {StyleType} from "./types";
 
 // TODO(kevinb): have an a version which uses exact object types
 export default function addStyle<T: React.AbstractComponent<any> | string>(

package/src/util/add-styles.flowtest.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import addStyle from "./add-style.js";
+import addStyle from "./add-style";
 
 const styles = StyleSheet.create({
     list: {

package/src/util/ssr-id-factory.js

@@ -1,5 +1,5 @@
 // @flow
-import type {IIdentifierFactory} from "./types.js";
+import type {IIdentifierFactory} from "./types";
 
 /**
  * This is NOT for direct use. Instead, see the UniqueIDProvider component.

package/src/util/unique-id-factory.js

@@ -1,5 +1,5 @@
 // @flow
-import type {IIdentifierFactory} from "./types.js";
+import type {IIdentifierFactory} from "./types";
 
 /**
  * This is NOT for direct use. Instead, see the UniqueIDProvider component.

package/src/util/util.js

@@ -2,7 +2,7 @@
 import {StyleSheet, css} from "aphrodite";
 import type {CSSProperties} from "aphrodite";
 
-import type {StyleType} from "./types.js";
+import type {StyleType} from "./types";
 
 type StyledExport = {|
     style: CSSProperties | Empty,