@khanacademy/wonder-blocks-layout 1.4.16 → 1.4.18

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @khanacademy/wonder-blocks-layout
 
+## 1.4.18
+
+### Patch Changes
+
+-   Updated dependencies [779b031d]
+    -   @khanacademy/wonder-blocks-core@4.9.0
+
+## 1.4.17
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+
 ## 1.4.16
 
 ### Patch Changes

package/dist/components/media-layout-context.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { MediaSize, MediaSpec } from "../util/types";
+export type Context = {
+    /**
+     * Force the MediaLayout to be a particular size (ignoring the actual
+     * dimensions of the viewport).
+     */
+    overrideSize?: MediaSize;
+    /**
+     * Set the size of the MediaLayout to be rendered when doing SSR
+     * (Server-Side Rendering) of the component.  Defaults to "large".
+     */
+    ssrSize: MediaSize;
+    /**
+     * If you wish to use a different set of layout sizes you can specify them as
+     * part of the `mediaSpec` property. The Core package exports a couple of the
+     * most commonly used ones:
+     *
+     *  **Default Layout Spec (`MEDIA_DEFAULT_SPEC`)**
+     *
+     * | Size   | Columns | Gutter | Margin | Breakpoint                                                                                                                         |
+     * | ------ | ------- | ------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+     * | small  | 4       | 16px   | 16px   | `max-width: 767px`                                                                                                                 |
+     * | medium | 8       | 32px   | 24px   | `min-width: 768px and max-width: 1023px`                                                                                           |
+     * | large  | 12      | 32px   | 24px   | `min-width: 1024px` (maximum content width: `1120px`, after which the margins will continue to expand and content remain centered) |
+     *
+     * Additionally, the following layout size specs are also available:
+     *
+     * **Internal Tools (`MEDIA_INTERNAL_SPEC`)**
+     *
+     * | Size  | Columns | Gutter | Margin | Breakpoint                                   |
+     * | ----- | ------- | ------ | ------ | -------------------------------------------- |
+     * | large | 12      | 32px   | 16px   | `min-width: 1px` (No maximum content width.) |
+     *
+     * **12-Column Modal (`MEDIA_MODAL_SPEC`)**
+     *
+     * | Size  | Columns | Gutter | Margin | Breakpoint                                     |
+     * | ----- | ------- | ------ | ------ | ---------------------------------------------- |
+     * | small | 4       | 16px   | 16px   | `max-width: 767px`                             |
+     * | large | 12      | 32px   | 64px   | `min-width: 768px` (No maximum content width.) |
+     */
+    mediaSpec: MediaSpec;
+};
+declare const _default: React.Context<Context>;
+export default _default;

package/dist/components/media-layout-context.js.flow

@@ -0,0 +1,55 @@
+/**
+ * Flowtype definitions for media-layout-context
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { MediaSize, MediaSpec } from "../util/types";
+export type Context = {
+  /**
+   * Force the MediaLayout to be a particular size (ignoring the actual
+   * dimensions of the viewport).
+   */
+  overrideSize?: MediaSize,
+
+  /**
+   * Set the size of the MediaLayout to be rendered when doing SSR
+   * (Server-Side Rendering) of the component.  Defaults to "large".
+   */
+  ssrSize: MediaSize,
+
+  /**
+   * If you wish to use a different set of layout sizes you can specify them as
+   * part of the `mediaSpec` property. The Core package exports a couple of the
+   * most commonly used ones:
+   *
+   *  **Default Layout Spec (`MEDIA_DEFAULT_SPEC`)**
+   *
+   * | Size   | Columns | Gutter | Margin | Breakpoint                                                                                                                         |
+   * | ------ | ------- | ------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+   * | small  | 4       | 16px   | 16px   | `max-width: 767px`                                                                                                                 |
+   * | medium | 8       | 32px   | 24px   | `min-width: 768px and max-width: 1023px`                                                                                           |
+   * | large  | 12      | 32px   | 24px   | `min-width: 1024px` (maximum content width: `1120px`, after which the margins will continue to expand and content remain centered) |
+   *
+   * Additionally, the following layout size specs are also available:
+   *
+   * **Internal Tools (`MEDIA_INTERNAL_SPEC`)**
+   *
+   * | Size  | Columns | Gutter | Margin | Breakpoint                                   |
+   * | ----- | ------- | ------ | ------ | -------------------------------------------- |
+   * | large | 12      | 32px   | 16px   | `min-width: 1px` (No maximum content width.) |
+   *
+   * **12-Column Modal (`MEDIA_MODAL_SPEC`)**
+   *
+   * | Size  | Columns | Gutter | Margin | Breakpoint                                     |
+   * | ----- | ------- | ------ | ------ | ---------------------------------------------- |
+   * | small | 4       | 16px   | 16px   | `max-width: 767px`                             |
+   * | large | 12      | 32px   | 64px   | `min-width: 768px` (No maximum content width.) |
+   */
+  mediaSpec: MediaSpec,
+  ...
+};
+declare var _default: React.Context<Context>;
+declare export default typeof _default;

package/dist/components/media-layout.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+import type { StyleDeclaration } from "aphrodite";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { MediaSize, MediaSpec } from "../util/types";
+export type MockStyleSheet = Record<string, StyleType>;
+type Props = {
+    /**
+     * The contents to display. Alternatively, a function can be specified
+     * that takes three arguments and should return some nodes to display.
+     *
+     *   - mediaSize: The current size of the viewport (small/medium/large)
+     *   - mediaSpec: The current spec being used to manage the selection of
+     *                the mediaSize.
+     *   - styles: An Aphrodite stylesheet representing the current
+     *                  stylesheet for this mediaSize (as specified in the
+     *                  styleSheets prop).
+     */
+    children: (arg1: {
+        mediaSize: MediaSize;
+        mediaSpec: MediaSpec;
+        styles: MockStyleSheet;
+    }) => React.ReactElement;
+    /**
+     * Aphrodite stylesheets to pass through to the styles prop. The
+     * stylesheets to render is based on the media size. "all" is always
+     * rendered.
+     */
+    styleSheets?: {
+        all?: StyleDeclaration;
+        mdOrLarger?: StyleDeclaration;
+        mdOrSmaller?: StyleDeclaration;
+        small?: StyleDeclaration;
+        medium?: StyleDeclaration;
+        large?: StyleDeclaration;
+    };
+};
+/**
+ * ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
+ *
+ * MediaLayout is a container component that accepts a `styleSheets` object,
+ * whose keys are media sizes. It listens for changes to the current media
+ * size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
+ * `children`, which is a render function taking those three values as an
+ * object.
+ *
+ * Valid keys for the `styleSheets` object are (in order of precedence):
+ * - `small`, `medium`, `large`
+ * - `mdOrSmaller`, `mdOrLarger`
+ * - `all`
+ *
+ * `MediaLayout` will merge style rules from multiple styles that match the
+ * current media query, e.g. `"(min-width: 1024px)"`.
+ *
+ * The `mediaSpec` is an object with one or more of the following keys:
+ * `small`, `medium`, or `large`. Each value contains the following data:
+ * - `query: string` e.g. "(min-width: 1024px)"
+ * - `totalColumns: number`
+ * - `gutterWidth: number`
+ * - `marginWidth: number`
+ * - `maxWidth: number`
+ */
+export default class MediaLayout extends React.Component<Props> {
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/media-layout.js.flow

@@ -0,0 +1,75 @@
+/**
+ * Flowtype definitions for media-layout
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleDeclaration } from "aphrodite";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { MediaSize, MediaSpec } from "../util/types";
+export type MockStyleSheet = { [key: string]: StyleType, ... };
+declare type Props = {
+  /**
+   * The contents to display. Alternatively, a function can be specified
+   * that takes three arguments and should return some nodes to display.
+   *
+   *   - mediaSize: The current size of the viewport (small/medium/large)
+   *   - mediaSpec: The current spec being used to manage the selection of
+   *                the mediaSize.
+   *   - styles: An Aphrodite stylesheet representing the current
+   *                  stylesheet for this mediaSize (as specified in the
+   *                  styleSheets prop).
+   */
+  children: (arg1: {
+    mediaSize: MediaSize,
+    mediaSpec: MediaSpec,
+    styles: MockStyleSheet,
+    ...
+  }) => React.Element<>,
+
+  /**
+   * Aphrodite stylesheets to pass through to the styles prop. The
+   * stylesheets to render is based on the media size. "all" is always
+   * rendered.
+   */
+  styleSheets?: {
+    all?: StyleDeclaration,
+    mdOrLarger?: StyleDeclaration,
+    mdOrSmaller?: StyleDeclaration,
+    small?: StyleDeclaration,
+    medium?: StyleDeclaration,
+    large?: StyleDeclaration,
+    ...
+  },
+  ...
+};
+/**
+ * ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
+ *
+ * MediaLayout is a container component that accepts a `styleSheets` object,
+ * whose keys are media sizes. It listens for changes to the current media
+ * size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
+ * `children`, which is a render function taking those three values as an
+ * object.
+ *
+ * Valid keys for the `styleSheets` object are (in order of precedence):
+ * - `small`, `medium`, `large`
+ * - `mdOrSmaller`, `mdOrLarger`
+ * - `all`
+ *
+ * `MediaLayout` will merge style rules from multiple styles that match the
+ * current media query, e.g. `"(min-width: 1024px)"`.
+ *
+ * The `mediaSpec` is an object with one or more of the following keys:
+ * `small`, `medium`, or `large`. Each value contains the following data:
+ * - `query: string` e.g. "(min-width: 1024px)"
+ * - `totalColumns: number`
+ * - `gutterWidth: number`
+ * - `marginWidth: number`
+ * - `maxWidth: number`
+ */
+declare export default class MediaLayout extends React.Component<Props> {
+  render(): React.Element<>;
+}

package/dist/components/spring.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    style?: StyleType;
+};
+/**
+ * Expands to fill space between sibling components.
+ *
+ * Assumes parent is a View.
+ */
+export default class Spring extends React.Component<Props> {
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/spring.js.flow

@@ -0,0 +1,21 @@
+/**
+ * Flowtype definitions for spring
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type Props = {
+  style?: StyleType,
+  ...
+};
+/**
+ * Expands to fill space between sibling components.
+ *
+ * Assumes parent is a View.
+ */
+declare export default class Spring extends React.Component<Props> {
+  render(): React.Element<>;
+}

package/dist/components/strut.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    size: number;
+    style?: StyleType;
+};
+/**
+ * A component for inserting fixed space between components.
+ *
+ * Assumes parent is a View.
+ */
+export default class Strut extends React.Component<Props> {
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/strut.js.flow

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for strut
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type Props = {
+  size: number,
+  style?: StyleType,
+  ...
+};
+/**
+ * A component for inserting fixed space between components.
+ *
+ * Assumes parent is a View.
+ */
+declare export default class Strut extends React.Component<Props> {
+  render(): React.Element<>;
+}

package/dist/es/index.js

@@ -1,9 +1,37 @@
-import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { StyleSheet } from 'aphrodite';
 import { View } from '@khanacademy/wonder-blocks-core';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
 const VALID_MEDIA_SIZES = ["small", "medium", "large"];
 const mediaDefaultSpecLargeMarginWidth = Spacing.large_24;
 const MEDIA_DEFAULT_SPEC = {
@@ -59,26 +87,26 @@ var MediaLayoutContext = React.createContext(defaultContext);
 const queries = [].concat(Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query));
 const mediaQueryLists = {};
 const DEFAULT_SIZE = "large";
-
-class MediaLayoutInternal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
+let MediaLayoutInternal = function (_React$Component) {
+  _inheritsLoose(MediaLayoutInternal, _React$Component);
+  function MediaLayoutInternal(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.cleanupThunks = void 0;
+    _this.state = {
       size: undefined
     };
-    this.cleanupThunks = [];
+    _this.cleanupThunks = [];
+    return _this;
   }
-
-  componentDidMount() {
+  var _proto = MediaLayoutInternal.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     const entries = Object.entries(this.props.mediaSpec);
-
     for (const [size, spec] of entries) {
       const mql = mediaQueryLists[spec.query];
-
       if (!mql) {
         continue;
       }
-
       const listener = e => {
         if (e.matches) {
           this.setState({
@@ -86,81 +114,64 @@ class MediaLayoutInternal extends React.Component {
           });
         }
       };
-
       mql.addListener(listener);
       this.cleanupThunks.push(() => mql.removeListener(listener));
     }
-  }
-
-  componentWillUnmount() {
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this.cleanupThunks.forEach(cleaup => cleaup());
-  }
-
-  getCurrentSize(spec) {
+  };
+  _proto.getCurrentSize = function getCurrentSize(spec) {
     if (this.state.size) {
       return this.state.size;
     } else {
       const entries = Object.entries(this.props.mediaSpec);
-
       for (const [size, _spec] of entries) {
         const mql = mediaQueryLists[_spec.query];
-
         if (mql.matches) {
           return size;
         }
       }
     }
-
     return DEFAULT_SIZE;
-  }
-
-  isServerSide() {
+  };
+  _proto.isServerSide = function isServerSide() {
     return typeof window === "undefined" || !window.matchMedia;
-  }
-
-  getMockStyleSheet(mediaSize) {
+  };
+  _proto.getMockStyleSheet = function getMockStyleSheet(mediaSize) {
     const {
       styleSheets
     } = this.props;
     const mockStyleSheet = {};
-
     if (!styleSheets) {
       return mockStyleSheet;
     }
-
     for (const styleSize of Object.keys(styleSheets)) {
       const styleSheet = styleSheets[styleSize];
-
       if (!styleSheet) {
         continue;
       }
-
       for (const name of Object.keys(styleSheet)) {
         if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
           continue;
         }
-
         mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
       }
     }
-
     return mockStyleSheet;
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       children,
       mediaSpec,
       ssrSize,
       overrideSize
     } = this.props;
-
     if (!this.isServerSide()) {
       for (const query of queries.filter(query => !mediaQueryLists[query])) {
         mediaQueryLists[query] = window.matchMedia(query);
       }
     }
-
     const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
     const styles = this.getMockStyleSheet(mediaSize);
     return children({
@@ -168,12 +179,16 @@ class MediaLayoutInternal extends React.Component {
       mediaSpec,
       styles
     });
+  };
+  return MediaLayoutInternal;
+}(React.Component);
+let MediaLayout = function (_React$Component2) {
+  _inheritsLoose(MediaLayout, _React$Component2);
+  function MediaLayout() {
+    return _React$Component2.apply(this, arguments) || this;
   }
-
-}
-
-class MediaLayout extends React.Component {
-  render() {
+  var _proto2 = MediaLayout.prototype;
+  _proto2.render = function render() {
     return React.createElement(MediaLayoutContext.Consumer, null, ({
       overrideSize,
       ssrSize,
@@ -183,12 +198,17 @@ class MediaLayout extends React.Component {
       ssrSize: ssrSize,
       mediaSpec: mediaSpec
     })));
-  }
-
-}
+  };
+  return MediaLayout;
+}(React.Component);
 
-class Spring extends React.Component {
-  render() {
+let Spring = function (_React$Component) {
+  _inheritsLoose(Spring, _React$Component);
+  function Spring() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Spring.prototype;
+  _proto.render = function render() {
     const {
       style
     } = this.props;
@@ -196,17 +216,22 @@ class Spring extends React.Component {
       "aria-hidden": "true",
       style: [styles.grow, style]
     });
-  }
-
-}
+  };
+  return Spring;
+}(React.Component);
 const styles = StyleSheet.create({
   grow: {
     flexGrow: 1
   }
 });
 
-class Strut extends React.Component {
-  render() {
+let Strut = function (_React$Component) {
+  _inheritsLoose(Strut, _React$Component);
+  function Strut() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Strut.prototype;
+  _proto.render = function render() {
     const {
       size,
       style
@@ -215,10 +240,9 @@ class Strut extends React.Component {
       "aria-hidden": "true",
       style: [strutStyle(size), style]
     });
-  }
-
-}
-
+  };
+  return Strut;
+}(React.Component);
 const strutStyle = size => {
   return {
     width: size,
@@ -234,22 +258,16 @@ const queryMatchesSize = (mediaQuery, mediaSize) => {
   switch (mediaQuery) {
     case "all":
       return true;
-
     case "small":
       return mediaSize === "small";
-
     case "mdOrSmaller":
       return mediaSize === "medium" || mediaSize === "small";
-
     case "medium":
       return mediaSize === "medium";
-
     case "mdOrLarger":
       return mediaSize === "medium" || mediaSize === "large";
-
     case "large":
       return mediaSize === "large";
-
     default:
       throw new Error(`Unsupported mediaSize: ${mediaSize}`);
   }

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import type { MediaQuery, MediaSize, MediaSpec } from "./util/types";
+import type { Context } from "./components/media-layout-context";
+import type { MockStyleSheet } from "./components/media-layout";
+export { default as MediaLayout } from "./components/media-layout";
+export { default as MediaLayoutContext } from "./components/media-layout-context";
+export { default as Spring } from "./components/spring";
+export { default as Strut } from "./components/strut";
+export * from "./util/specs";
+export { queryMatchesSize } from "./util/util";
+export type { MediaQuery, MediaSize, MediaSpec, MockStyleSheet, Context as MediaLayoutContextValue, };