codelabs-react - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

package.json

 {
   "name": "codelabs-react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "scripts": {
@@ -7,0 +8,0 @@ "test": "mocha -r esm **/*.test.js",

src/components.js

@@ -73,2 +73,6 @@ import React from "react";
 
+export function H1({ children }) {
+  return <h1>{children}</h1>;
+}
+
 export function H2({ children }) {
@@ -114,2 +118,10 @@ return <h2>{children}</h2>;
 
+export function Button({ disabled, children, onClick }) {
+  return (
+    <button onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  );
+}
+
 export function Link({ children, href }) {
@@ -116,0 +128,0 @@ return (

src/index.js

@@ -8,2 +8,3 @@ import React, { useState } from "react";
   Main,
+  H1,
   H2,
@@ -15,2 +16,3 @@ H3,
   Span,
+  Button,
   ButtonLink,
@@ -38,2 +40,4 @@ Snippet,
   const MainComponent = overrides.Main || Main;
+
+  const H1Component = overrides.H1 || H1;
   const H2Component = overrides.H2 || H2;
@@ -44,4 +48,6 @@ const H3Component = overrides.H3 || H3;
   const H6Component = overrides.H6 || H6;
+
   const SpanComponent = overrides.Span || Span;
   const ButtonLinkComponent = overrides.ButtonLink || ButtonLink;
+  const ButtonComponent = overrides.Button || Button;
   const SnippetComponent = overrides.Snippet || Snippet;
@@ -104,4 +110,4 @@ const LinkComponent = overrides.Link || Link;
 
-  const pages = pageNodes.map((page) => {
-    return page.map((node) => {
+  const pages = pageNodes.map((page, index) => {
+    const reactPage = page.map((node) => {
       // we have text node, with possibly multiple elements
@@ -154,2 +160,11 @@ if (node.paragraph) {
     });
+
+    // +1, so it's a human readable page index
+    reactPage.unshift(
+      <H1Component>
+        {index + 1}. {headings[index]}
+      </H1Component>
+    );
+
+    return reactPage;
   });
@@ -161,3 +176,3 @@
       navigationItems={headings}
-      page={pages[page]}
+      pages={pages}
       currentPage={page}
@@ -170,2 +185,3 @@ setPage={setPage}
         MainComponent,
+        ButtonComponent,
       }}
@@ -179,3 +195,3 @@ />
   navigationItems,
-  page,
+  pages,
   currentPage,
@@ -188,2 +204,3 @@ setPage,
     MainComponent,
+    ButtonComponent,
   },
@@ -200,3 +217,31 @@ }) {
         />
-        <ContentComponent currentPage={currentPage}>{page}</ContentComponent>
+        <ContentComponent currentPage={currentPage}>
+          <>
+            {pages[currentPage]}
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginTop: "32px",
+              }}
+            >
+              <ButtonComponent
+                disabled={currentPage - 1 < 0}
+                onClick={() => {
+                  setPage(currentPage - 1);
+                }}
+              >
+                Previous
+              </ButtonComponent>
+              <ButtonComponent
+                disabled={currentPage + 1 === pages.length}
+                onClick={() => {
+                  setPage(currentPage + 1);
+                }}
+              >
+                Next
+              </ButtonComponent>
+            </div>
+          </>
+        </ContentComponent>
       </MainComponent>
@@ -203,0 +248,0 @@ </div>

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16247

increased by9.26%

Lines of code

602

increased by9.26%

Number of medium supply chain risk alerts

0

decreased by-100%

Is type module

Yes

No dependency changes