@khanacademy/wonder-blocks-grid 1.0.38 → 1.0.39

package/dist/index.js

@@ -8,25 +8,39 @@ var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var aphrodite = require('aphrodite');
 
 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]; }
-                });
-            }
+  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);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+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 WIDE_SCREEN = "@media (min-width: 1168px)";
 const styles = aphrodite.StyleSheet.create({
   row: {
@@ -56,12 +70,15 @@ const flexBasis = size => {
   };
 };
 
-class Cell extends React__namespace.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_CELL__;
+let Cell = function (_React$Component) {
+  _inheritsLoose(Cell, _React$Component);
+  function Cell() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-  static getCols(props, mediaSize) {
+  Cell.isClassOf = function isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_CELL__;
+  };
+  Cell.getCols = function getCols(props, mediaSize) {
     if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
       return undefined;
     } else if (props.smallCols && mediaSize === "small") {
@@ -75,16 +92,14 @@ class Cell extends React__namespace.Component {
     } else if (props.cols) {
       return props.cols;
     }
-
     return null;
-  }
-
-  static shouldDisplay(props, mediaSize) {
+  };
+  Cell.shouldDisplay = function shouldDisplay(props, mediaSize) {
     const cols = Cell.getCols(props, mediaSize);
     return cols !== null && cols !== 0;
-  }
-
-  render() {
+  };
+  var _proto = Cell.prototype;
+  _proto.render = function render() {
     const {
       children,
       style
@@ -94,26 +109,21 @@ class Cell extends React__namespace.Component {
       mediaSpec
     }) => {
       const spec = mediaSpec[mediaSize];
-
       if (!spec) {
         throw new Error(`mediaSpec.${mediaSize} is undefined`);
       }
-
       const {
         totalColumns,
         gutterWidth,
         marginWidth
       } = spec;
       const cols = Cell.getCols(this.props, mediaSize);
-
       if (cols === undefined || cols === null || cols === 0) {
         return null;
       }
-
       if (cols > totalColumns) {
         throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
       }
-
       const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`;
       const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`;
       const contents = typeof children === "function" ? children({
@@ -125,9 +135,9 @@ class Cell extends React__namespace.Component {
         style: [styles.cellFixed, flexBasis(calcWidth), style]
       }, contents);
     });
-  }
-
-}
+  };
+  return Cell;
+}(React__namespace.Component);
 Cell.defaultProps = {
   smallCols: 0,
   mediumCols: 0,
@@ -136,39 +146,45 @@ Cell.defaultProps = {
 };
 Cell.__IS_CELL__ = true;
 
-class Gutter extends React__namespace.Component {
-  render() {
+let Gutter = function (_React$Component) {
+  _inheritsLoose(Gutter, _React$Component);
+  function Gutter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Gutter.prototype;
+  _proto.render = function render() {
     return React__namespace.createElement(wonderBlocksLayout.MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
       const spec = mediaSpec[mediaSize];
-
       if (!spec) {
         throw new Error(`mediaSpec.${mediaSize} is undefined`);
       }
-
       const {
         gutterWidth
       } = spec;
-
       if (!wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery, mediaSize)) {
         return null;
       }
-
       return React__namespace.createElement(wonderBlocksLayout.Strut, {
         size: gutterWidth
       });
     });
-  }
-
-}
+  };
+  return Gutter;
+}(React__namespace.Component);
 Gutter.defaultProps = {
   mediaQuery: "all"
 };
 
-class Row extends React__namespace.Component {
-  render() {
+let Row = function (_React$Component) {
+  _inheritsLoose(Row, _React$Component);
+  function Row() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Row.prototype;
+  _proto.render = function render() {
     const {
       style,
       children
@@ -178,22 +194,18 @@ class Row extends React__namespace.Component {
       mediaSpec
     }) => {
       const spec = mediaSpec[mediaSize];
-
       if (!spec) {
         throw new Error(`mediaSpec.${mediaSize} is undefined`);
       }
-
       const {
         marginWidth,
         maxWidth,
         totalColumns
       } = spec;
       const shouldDisplay = wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery, mediaSize);
-
       if (!shouldDisplay) {
         return null;
       }
-
       const contents = typeof children === "function" ? children({
         mediaSize,
         totalColumns
@@ -211,9 +223,9 @@ class Row extends React__namespace.Component {
         size: marginWidth
       }));
     });
-  }
-
-}
+  };
+  return Row;
+}(React__namespace.Component);
 Row.defaultProps = {
   mediaQuery: "all"
 };

package/dist/index.js.flow

@@ -1,2 +1,9 @@
-// @flow
-export * from "../src/index";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+declare export { default as Cell } from "./components/cell";
+declare export { default as Row } from "./components/row";

package/dist/util/styles.d.ts

@@ -0,0 +1,3 @@
+import type { StyleDeclaration } from "aphrodite";
+declare const styles: StyleDeclaration;
+export default styles;

package/dist/util/styles.js.flow

@@ -0,0 +1,10 @@
+/**
+ * Flowtype definitions for styles
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type { StyleDeclaration } from "aphrodite";
+declare var styles: StyleDeclaration;
+declare export default typeof styles;

package/dist/util/utils.d.ts

@@ -0,0 +1,2 @@
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+export declare const flexBasis: (size: number | string) => StyleType;

package/dist/util/utils.js.flow

@@ -0,0 +1,9 @@
+/**
+ * Flowtype definitions for utils
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare export var flexBasis: (size: number | string) => StyleType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-grid",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "description": "Grid components for Wonder Blocks design system.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,16 +16,16 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-color": "^1.2.1",
-    "@khanacademy/wonder-blocks-core": "^4.7.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.16",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5"
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.8.0",
+    "@khanacademy/wonder-blocks-layout": "^1.4.17",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.1"
+    "wb-dev-build-settings": "^0.7.2"
   }
 }

package/src/components/__tests__/{row.test.js → row.test.tsx}

@@ -1,5 +1,3 @@
-// @flow
-
 import * as React from "react";
 import {render} from "@testing-library/react";
 

package/src/components/{cell.js → cell.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
@@ -9,42 +8,37 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import styles from "../util/styles";
 import {flexBasis} from "../util/utils";
 
-type Props = {|
+type Props = {
     /** The number of columns this cell should span on a Small Grid. */
-    smallCols: number,
-
+    smallCols: number;
     /** The number of columns this cell should span on a Medium Grid. */
-    mediumCols: number,
-
+    mediumCols: number;
     /** The number of columns this cell should span on a Large Grid. */
-    largeCols: number,
-
+    largeCols: number;
     /** The number of columns this should should span by default. */
-    cols: number | ((mediaSize: MediaSize) => number),
-
+    cols: number | ((mediaSize: MediaSize) => number);
     /**
      * The child components to populate inside the cell. Can also accept a
      * function which receives the `mediaSize`, `totalColumns`, and cell
      * `width` and should return some React Nodes to render.
      */
     children:
-        | React.Node
-        | (({|
-              mediaSize: MediaSize,
-              totalColumns: number,
-              cols: number,
-          |}) => React.Node),
-
+        | React.ReactNode
+        | ((arg1: {
+              mediaSize: MediaSize;
+              totalColumns: number;
+              cols: number;
+          }) => React.ReactElement);
     /** The styling to apply to the cell. */
-    style?: StyleType,
-|};
+    style?: StyleType;
+};
 
-type DefaultProps = {|
-    smallCols: $PropertyType<Props, "smallCols">,
-    mediumCols: $PropertyType<Props, "mediumCols">,
-    largeCols: $PropertyType<Props, "largeCols">,
-    cols: $PropertyType<Props, "cols">,
-|};
+type DefaultProps = {
+    smallCols: Props["smallCols"];
+    mediumCols: Props["mediumCols"];
+    largeCols: Props["largeCols"];
+    cols: Props["cols"];
+};
 
 /**
  * A Cell is a container whose width is set based on the width of the
@@ -63,11 +57,15 @@ type DefaultProps = {|
  * using the specified column width.
  */
 export default class Cell extends React.Component<Props> {
-    static isClassOf(instance: React.Element<any>): boolean {
+    static isClassOf(instance: React.ReactElement<any>): boolean {
+        // @ts-expect-error [FEI-5019] - TS2339 - Property '__IS_CELL__' does not exist on type 'string | JSXElementConstructor<any>'.
         return instance && instance.type && instance.type.__IS_CELL__;
     }
 
-    static getCols(props: Props, mediaSize: MediaSize): ?number {
+    static getCols(
+        props: Props,
+        mediaSize: MediaSize,
+    ): number | null | undefined {
         // If no option was specified then we just return undefined,
         // components may handle this case differently.
         // We go through all the ways in which a fixed width can be
@@ -110,13 +108,14 @@ export default class Cell extends React.Component<Props> {
         cols: 0,
     };
 
-    static __IS_CELL__: boolean = true;
+    static __IS_CELL__ = true;
 
-    render(): React.Node {
+    render(): React.ReactElement | null {
         const {children, style} = this.props;
 
         return (
             <MediaLayout>
+                {/* @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call. */}
                 {({mediaSize, mediaSpec}) => {
                     const spec = mediaSpec[mediaSize];
                     if (!spec) {

package/src/components/{gutter.js → gutter.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {
     MediaLayout,
@@ -7,16 +6,16 @@ import {
 } from "@khanacademy/wonder-blocks-layout";
 import type {MediaQuery} from "@khanacademy/wonder-blocks-layout";
 
-type Props = {|
+type Props = {
     /**
      * Which media should this cell be renderer on.  Defaults to all.
      */
-    mediaQuery: MediaQuery,
-|};
+    mediaQuery: MediaQuery;
+};
 
-type DefaultProps = {|
-    mediaQuery: $PropertyType<Props, "mediaQuery">,
-|};
+type DefaultProps = {
+    mediaQuery: Props["mediaQuery"];
+};
 
 /**
  * Gutter is a component whose width is set based on the size of grid currently
@@ -36,9 +35,10 @@ export default class Gutter extends React.Component<Props> {
         mediaQuery: "all",
     };
 
-    render(): React.Node {
+    render(): React.ReactElement | null {
         return (
             <MediaLayout>
+                {/* @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call. */}
                 {({mediaSize, mediaSpec}) => {
                     const spec = mediaSpec[mediaSize];
                     if (!spec) {

package/src/components/{row.js → row.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {
@@ -13,12 +12,11 @@ import styles from "../util/styles";
 import Gutter from "./gutter";
 import Cell from "./cell";
 
-type Props = {|
+type Props = {
     /**
      * Which media should this cell be renderer on.  Defaults to all.
      */
-    mediaQuery: MediaQuery,
-
+    mediaQuery: MediaQuery;
     /**
      * The child components to populate inside the row. Typically this will be
      * a [Cell](#cell), but it can also include any elements
@@ -27,19 +25,18 @@ type Props = {|
      * `totalColumns` and should return some React Nodes to render.
      */
     children:
-        | React.Node
-        | (({|
-              mediaSize: MediaSize,
-              totalColumns: number,
-          |}) => React.Node),
-
+        | React.ReactNode
+        | ((arg1: {
+              mediaSize: MediaSize;
+              totalColumns: number;
+          }) => React.ReactElement);
     /** The styling to apply to the row. */
-    style?: StyleType,
-|};
+    style?: StyleType;
+};
 
-type DefaultProps = {|
-    mediaQuery: $PropertyType<Props, "mediaQuery">,
-|};
+type DefaultProps = {
+    mediaQuery: Props["mediaQuery"];
+};
 
 /**
  * A Row holds all of the Cells that make up the contents of the grid. A row
@@ -64,11 +61,12 @@ export default class Row extends React.Component<Props> {
         mediaQuery: "all",
     };
 
-    render(): React.Node {
+    render(): React.ReactElement | null {
         const {style, children} = this.props;
 
         return (
             <MediaLayout>
+                {/* @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call. */}
                 {({mediaSize, mediaSpec}) => {
                     const spec = mediaSpec[mediaSize];
                     if (!spec) {
@@ -93,34 +91,34 @@ export default class Row extends React.Component<Props> {
                             ? children({mediaSize, totalColumns})
                             : children;
 
-                    const filteredContents: Array<React.Node> =
-                        (React.Children.toArray(contents): Array<React.Node>)
-                            // Go through all of the contents and pre-emptively remove anything
-                            // that shouldn't be rendered.
-                            .filter(
-                                // Flow doesn't let us check .type on a non-null React.Node so
-                                // we have to cast it to any.
-                                (item: any) =>
-                                    Cell.isClassOf(item)
-                                        ? Cell.shouldDisplay(
-                                              item.props,
-                                              mediaSize,
-                                          )
-                                        : true,
-                            )
-                            // Intersperse Gutter elements between the cells.
-                            .reduce(
-                                (acc, elem, index) => [
-                                    ...acc,
-                                    elem,
-                                    <Gutter key={`gutter-${index}`} />,
-                                ],
-                                [],
-                            )
-                            // We only want gutters between each cell in the row.  The reduce
-                            // adds a gutter after every cell so we need to remove the last
-                            // element which is an unnecessary gutteer.
-                            .slice(0, -1);
+                    const filteredContents: Array<React.ReactNode> = (
+                        React.Children.toArray(
+                            contents,
+                        ) as Array<React.ReactNode>
+                    )
+                        // Go through all of the contents and pre-emptively remove anything
+                        // that shouldn't be rendered.
+                        .filter(
+                            // TypeScript doesn't let us check .type on a non-null React.Node so
+                            // we have to cast it to any.
+                            (item: any) =>
+                                Cell.isClassOf(item)
+                                    ? Cell.shouldDisplay(item.props, mediaSize)
+                                    : true,
+                        )
+                        // Intersperse Gutter elements between the cells.
+                        .reduce<Array<any>>(
+                            (acc, elem, index) => [
+                                ...acc,
+                                elem,
+                                <Gutter key={`gutter-${index}`} />,
+                            ],
+                            [],
+                        )
+                        // We only want gutters between each cell in the row.  The reduce
+                        // adds a gutter after every cell so we need to remove the last
+                        // element which is an unnecessary gutteer.
+                        .slice(0, -1);
 
                     return (
                         <View

package/src/{index.js → index.ts}

@@ -1,3 +1,2 @@
-// @flow
 export {default as Cell} from "./components/cell";
 export {default as Row} from "./components/row";

package/src/util/{styles.js → styles.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {StyleSheet} from "aphrodite";
 import type {StyleDeclaration} from "aphrodite";
 

package/src/util/{utils.js → utils.ts}

@@ -1,4 +1,3 @@
-// @flow
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 export const flexBasis = (size: number | string): StyleType => {

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "exclude": ["dist"],
+    "extends": "../tsconfig-shared.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "rootDir": "src",
+    },
+    "references": [
+        {"path": "../wonder-blocks-color"},
+        {"path": "../wonder-blocks-core"},
+        {"path": "../wonder-blocks-layout"},
+        {"path": "../wonder-blocks-spacing"},
+    ]
+}