@khanacademy/wonder-blocks-core - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

components/id-provider.md

@@ -6,2 +6,4 @@ ### Example: Usage with form fields
 ```jsx
+import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
+
 <View>
@@ -24,2 +26,4 @@ <IDProvider scope="field">
 ```jsx
+import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
+
 <View>
@@ -26,0 +30,0 @@ <IDProvider scope="field" id="some-user-id">

components/text.md

 **WARNING:** `Text` is meant for for use as a building block within typography
-components only, rather than direct use.  Please use the typography components 
-from `@khanacademy/wonder-blocks-typography` for all text.  The `font-weight` 
+components only, rather than direct use.  Please use the typography components
+from `@khanacademy/wonder-blocks-typography` for all text.  The `font-weight`
 and `font-style` of these components can be customized using the `style` prop.
-If you need to create type styles that are different sizes and/or font families 
+If you need to create type styles that are different sizes and/or font families
 than those in `@khanacademy/wonder-block-typography` please create custom type
@@ -10,3 +10,4 @@ components that wrap `Text`.
 ```js
-const {StyleSheet} = require("aphrodite");
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
 
@@ -40,2 +41,4 @@ const styles = StyleSheet.create({
 ```js
+import {View} from "@khanacademy/wonder-blocks-core";
+
 <View>
@@ -55,2 +58,4 @@ <View onClick={() => alert("Clicked!")}>
 ```js
+import {View} from "@khanacademy/wonder-blocks-core";
+
 <View>
@@ -57,0 +62,0 @@ <View testId="foo">Foo</View>

components/unique-id-provider.md

@@ -6,5 +6,6 @@ ### mockOnFirstRender false
 ```jsx
-const {Body, HeadingSmall} = require("@khanacademy/wonder-blocks-typography");
-const {Spring, Strut} = require("@khanacademy/wonder-blocks-layout");
-const Button = require("@khanacademy/wonder-blocks-button").default;
+import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
+import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
+import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
+import Button from "@khanacademy/wonder-blocks-button";
 
@@ -36,3 +37,6 @@ let providerRef = null;
 <View>
-    <View style={{flexDirection: "row"}}><Button onClick={onClick}>Click Me to Rerender</Button><Spring /></View>
+    <View style={{flexDirection: "row"}}>
+        <Button onClick={onClick}>Click Me to Rerender</Button>
+        <Spring />
+    </View>
     <Strut size={16} />
@@ -49,4 +53,5 @@ <HeadingSmall>The UniqueIDProvider:</HeadingSmall>
 ```jsx
-const {Body, BodyMonospace, HeadingSmall} = require("@khanacademy/wonder-blocks-typography");
-const {Spring, Strut} = require("@khanacademy/wonder-blocks-layout");
+import {Body, BodyMonospace, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
+import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
+import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
 
@@ -88,4 +93,4 @@ let firstId = null;
 ```jsx
-const {Body, HeadingSmall, BodyMonospace} = require("@khanacademy/wonder-blocks-typography");
-const {Spring, Strut} = require("@khanacademy/wonder-blocks-layout");
+import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
+import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
 
@@ -115,4 +120,5 @@ const children = ({get}) => (
 ```jsx
-const {BodyMonospace} = require("@khanacademy/wonder-blocks-typography");
-const {Strut} = require("@khanacademy/wonder-blocks-layout");
+import {BodyMonospace} from "@khanacademy/wonder-blocks-typography";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {UniqueIDProvider, View} from "@khanacademy/wonder-blocks-core";
 
@@ -119,0 +125,0 @@ // TODO(somewhatabstract): Update this to be nice once we can get BodyMonospace

components/view.md

 ```js
-const {StyleSheet} = require("aphrodite");
+import {StyleSheet} from "aphrodite";
+import {Text} from "@khanacademy/wonder-blocks-core";
 
@@ -31,2 +32,4 @@ const styles = StyleSheet.create({
 ```js
+import {Text} from "@khanacademy/wonder-blocks-core";
+
 <View>
@@ -33,0 +36,0 @@ <View onClick={() => alert("Clicked!")}>

components/with-ssr-placeholder.md

 `WithSSRPlaceholder` is a behavioral component, providing a mechanism to hide the rendering of a component from server-side rendering (SSR).
 
 ```jsx
+import {View, WithSSRPlaceholder} from "@khanacademy/wonder-blocks-core";
+
 <WithSSRPlaceholder placeholder={() => <View>This gets rendered on server, and also on the client for the very first render (the "rehydration" render)</View>}>
@@ -12,2 +14,4 @@ {() => <View>This is rendered only by the client, for all renders after the rehydration render.</View>}
 ```jsx
+import {View, WithSSRPlaceholder} from "@khanacademy/wonder-blocks-core";
+
 <WithSSRPlaceholder placeholder={null}>
@@ -21,3 +25,4 @@ {() => <View>This is rendered only by the client, while nothing was rendered on the server.</View>}
 ```jsx
-const {Body, BodyMonospace} = require("@khanacademy/wonder-blocks-typography");
+import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
+import {View, WithSSRPlaceholder} from "@khanacademy/wonder-blocks-core";
 
@@ -85,3 +90,4 @@ const trackingArray = [];
 ```jsx
-const {Body, BodyMonospace} = require("@khanacademy/wonder-blocks-typography");
+import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
+import {View, WithSSRPlaceholder} from "@khanacademy/wonder-blocks-core";
 
@@ -88,0 +94,0 @@ const trackingArray = [];

generated-snapshot.test.js

@@ -11,8 +11,19 @@ // This file is auto-generated by gen-snapshot-tests.js
 jest.mock("react-dom");
+import {
+    IDProvider,
+    View,
+    UniqueIDProvider,
+    Text,
+    WithSSRPlaceholder,
+} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import {
+    Body,
+    HeadingSmall,
+    BodyMonospace,
+} from "@khanacademy/wonder-blocks-typography";
+import {Spring, Strut} from "@khanacademy/wonder-blocks-layout";
+import Button from "@khanacademy/wonder-blocks-button";
+
 import ClickableBehavior from "./components/clickable-behavior.js";
-import IDProvider from "./components/id-provider.js";
-import Text from "./components/text.js";
-import UniqueIDProvider from "./components/unique-id-provider.js";
-import View from "./components/view.js";
-import WithSSRPlaceholder from "./components/with-ssr-placeholder.js";
 
@@ -36,2 +47,3 @@ describe("wonder-blocks-core", () => {
     });
+
     it("example 2", () => {
@@ -53,5 +65,4 @@ const example = (
     });
+
     it("example 3", () => {
-        const {StyleSheet} = require("aphrodite");
-
         const styles = StyleSheet.create({
@@ -67,3 +78,2 @@ container: {
         });
-
         const example = (
@@ -75,3 +85,6 @@ <View style={styles.container}>
                         styles.container,
-                        {backgroundColor: "goldenrod", padding: 4},
+                        {
+                            backgroundColor: "goldenrod",
+                            padding: 4,
+                        },
                     ]}
@@ -86,2 +99,3 @@ >
     });
+
     it("example 4", () => {
@@ -100,2 +114,3 @@ const example = (
     });
+
     it("example 5", () => {
@@ -111,12 +126,5 @@ const example = (
     });
+
     it("example 6", () => {
-        const {
-            Body,
-            HeadingSmall,
-        } = require("@khanacademy/wonder-blocks-typography");
-        const {Spring, Strut} = require("@khanacademy/wonder-blocks-layout");
-        const Button = require("@khanacademy/wonder-blocks-button").default;
-
         let providerRef = null;
-
         const renders = [];
@@ -151,3 +159,7 @@ const provider = (
             <View>
-                <View style={{flexDirection: "row"}}>
+                <View
+                    style={{
+                        flexDirection: "row",
+                    }}
+                >
                     <Button onClick={onClick}>Click Me to Rerender</Button>
@@ -164,10 +176,4 @@ <Spring />
     });
+
     it("example 7", () => {
-        const {
-            Body,
-            BodyMonospace,
-            HeadingSmall,
-        } = require("@khanacademy/wonder-blocks-typography");
-        const {Spring, Strut} = require("@khanacademy/wonder-blocks-layout");
-
         let firstId = null;
@@ -208,10 +214,4 @@ let secondId = null;
     });
+
     it("example 8", () => {
-        const {
-            Body,
-            HeadingSmall,
-            BodyMonospace,
-        } = require("@khanacademy/wonder-blocks-typography");
-        const {Spring, Strut} = require("@khanacademy/wonder-blocks-layout");
-
         const children = ({get}) => (
@@ -240,8 +240,4 @@ <View>
     });
+
     it("example 9", () => {
-        const {
-            BodyMonospace,
-        } = require("@khanacademy/wonder-blocks-typography");
-        const {Strut} = require("@khanacademy/wonder-blocks-layout");
-
         // TODO(somewhatabstract): Update this to be nice once we can get BodyMonospace
@@ -255,3 +251,7 @@ // to allow us to properly preserve whitespace or have an alternative. Or remove
                 </BodyMonospace>
-                <View style={{flexDirection: "row"}}>
+                <View
+                    style={{
+                        flexDirection: "row",
+                    }}
+                >
                     <Strut size={"2em"} />
@@ -266,5 +266,4 @@ <BodyMonospace>get(id: string): string;</BodyMonospace>
     });
+
     it("example 10", () => {
-        const {StyleSheet} = require("aphrodite");
-
         const styles = StyleSheet.create({
@@ -280,3 +279,2 @@ container: {
         });
-
         const example = (
@@ -288,3 +286,6 @@ <View style={styles.container}>
                         styles.container,
-                        {backgroundColor: "goldenrod", padding: 4},
+                        {
+                            backgroundColor: "goldenrod",
+                            padding: 4,
+                        },
                     ]}
@@ -299,2 +300,3 @@ >
     });
+
     it("example 11", () => {
@@ -313,2 +315,3 @@ const example = (
     });
+
     it("example 12", () => {
@@ -335,2 +338,3 @@ const example = (
     });
+
     it("example 13", () => {
@@ -350,10 +354,7 @@ const example = (
     });
+
     it("example 14", () => {
-        const {
-            Body,
-            BodyMonospace,
-        } = require("@khanacademy/wonder-blocks-typography");
-
         const trackingArray = [];
         const resultsId = "nossr-example-2-results";
+
         const newLi = (text) => {
@@ -367,2 +368,3 @@ const li = document.createElement("li");
             const el = document.getElementById(resultsId);
+
             if (el) {
@@ -372,2 +374,3 @@ for (let i = 0; i < trackingArray.length; i++) {
                 }
+
                 trackingArray.length = 0;
@@ -432,10 +435,7 @@ el.append(newLi(text));
     });
+
     it("example 15", () => {
-        const {
-            Body,
-            BodyMonospace,
-        } = require("@khanacademy/wonder-blocks-typography");
-
         const trackingArray = [];
         const resultsId = "nossr-example-3-results";
+
         const newLi = (text) => {
@@ -449,2 +449,3 @@ const li = document.createElement("li");
             const el = document.getElementById(resultsId);
+
             if (el) {
@@ -454,2 +455,3 @@ for (let i = 0; i < trackingArray.length; i++) {
                 }
+
                 trackingArray.length = 0;
@@ -456,0 +458,0 @@ el.append(newLi(text));

package.json

 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "design": "v1",
@@ -16,3 +16,3 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-spacing": "^2.1.6"
+    "@khanacademy/wonder-blocks-spacing": "^2.1.7"
   },
@@ -19,0 +19,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

311059

decreased by-7.74%

Number of package files

42

decreased by-26.32%

Lines of code

6547

decreased by-8.9%

Dependency changes

• Updated@khanacademy/wonder-blocks-spacing@^2.1.7