Fix warnings in storybook

pages/[lang]/community/aroundweb.res

@@ -163,7 +163,10 @@ module T = {
       <SectionContainer.LargeCentered paddingY="pb-14">
         <CardGrid
           cardData=content.spaces
-          renderCard={s => <ShortWideCard name=s.name logoSrc=s.logoSrc url=s.url />}
+          renderCard={(idx, s) =>
+            <div key={string_of_int(idx)}>
+              <ShortWideCard name=s.name logoSrc=s.logoSrc url=s.url />
+            </div>}
           title=content.spacesSectionHeader
         />
       </SectionContainer.LargeCentered>

pages/[lang]/resources/tutorials.res

@@ -33,7 +33,8 @@ module T = {
         <div className="pb-8">
           <CardGrid
             cardData=content.tutorials
-            renderCard={(t: Ood.Tutorial.t) => <Tutorial tutorial=t lang />}
+            renderCard={(idx, t: Ood.Tutorial.t) =>
+              <div key={string_of_int(idx)}> <Tutorial tutorial=t lang /> </div>}
           />
         </div>
       </Page.Basic>

pages/storybook.res

@@ -22,11 +22,12 @@ module Item = {
       <h2 className="font-black text-4xl"> {React.string(`<${name} />`)} </h2>
       <div className="mb-4 mt-8"> {docsElement} </div>
       {React.array(
-        children->Belt.Array.map(((color, (doc, child))) => {
+        children->Belt.Array.mapWithIndex((idx, (color, (doc, child))) => {
           <div
             className={`shadow overflow-hidden border-b border-gray-200 sm:rounded-lg ${colorClass(
                 color,
-              )} p-8 mb-8`}>
+              )} p-8 mb-8`}
+            key={string_of_int(idx)}>
             <div className="mb-2"> {React.string(doc)} </div> <hr /> {child}
           </div>
         }),
@@ -959,9 +960,7 @@ module Categories = {
             <div className="text-ocamlorange font-black">
               {React.string(Printf.sprintf("Foo-%d-%d", n, m))}
             </div>
-          | #Bar =>
-            Js.log(a)
-            React.string(Printf.sprintf("Bar-%d-%d", n, m))
+          | #Bar => React.string(Printf.sprintf("Bar-%d-%d", n, m))
           }
         }
         let detailsComponent = foobar => {
@@ -1275,16 +1274,19 @@ module Categories = {
               (
                 "CardGrid rendered with strings for each element",
                 {
-                  let renderCard = React.string
+                  let renderCard = (idx, x) =>
+                    <div key={string_of_int(idx)}> {React.string(x)} </div>
                   let title = "Example"
                   <CardGrid cardData renderCard title />
                 },
               ),
               (
                 "CardGrid rendered with Cards for each element",
                 {
-                  let renderCard = s =>
-                    <Card title="<Card>" kind={#Opaque}> {React.string(s)} </Card>
+                  let renderCard = (idx, s) =>
+                    <div key={string_of_int(idx)}>
+                      <Card title="<Card>" kind={#Opaque}> {React.string(s)} </Card>
+                    </div>
                   let title = "Example"
                   <CardGrid cardData renderCard title />
                 },

src/CardGrid.res

@@ -11,6 +11,6 @@ let make = (~cardData, ~renderCard, ~title=?) => <>
   | None => <> </>
   }}
   <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-28 gap-y-4 px-8">
-    {cardData->Belt.Array.map(renderCard)->React.array}
+    {cardData->Belt.Array.mapWithIndex(renderCard)->React.array}
   </div>
 </>

src/CardGrid.resi

@@ -3,6 +3,6 @@ open! Import
 @react.component
 let make: (
   ~cardData: array<'a>,
-  ~renderCard: 'a => React.element,
+  ~renderCard: (int, 'a) => React.element,
   ~title: string=?,
 ) => React.element

src/ContentGrid.res

@@ -37,7 +37,7 @@ let make = (~title, ~renderChild, ~cols, ~children) => {
               },
             ])
           }
-          <div className=border>
+          <div className=border key={string_of_int(i)}>
             <div
               className="h-24 flex items-center justify-center px-4 font-bold bg-white mx-8 my-3 rounded">
               <p className="text-center"> {renderChild(child)} </p>

src/HeaderNavigation.res

@@ -296,37 +296,37 @@ let make = (~content) => {
             </div>
           </div>
           <div className="mt-6">
-            <nav className="grid gap-y-2">
-              {Js.Array.concatMany(
-                Js.Array.map(
-                  (section: section) =>
-                    Js.Array.concat(
-                      Js.Array.mapi(
-                        (e: NavEntry.t, idx) =>
-                          <Next.Link href=e.url key={Js.Int.toString(idx)}>
-                            <a
-                              onClick=hideMobileMenu
-                              className="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
-                              <span
-                                className="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-5 w-5 stroke-current fill-current stroke-2">
-                                {e.icon}
-                              </span>
-                              <span className="font-bold"> {React.string(e.label)} </span>
-                            </a>
-                          </Next.Link>,
-                        section.entries,
-                      ),
-                      [
-                        <h3 className="ml-6 mt-2 px-3 font-semibold text-gray-400 uppercase">
-                          {React.string(section.header)}
-                        </h3>,
-                      ],
+            <nav className="grid gap-y-2"> {Js.Array.concatMany(Js.Array.map((section: section) => {
+                  let len = Belt.Array.length(section.entries)
+                  Js.Array.concat(
+                    Js.Array.mapi(
+                      (e: NavEntry.t, idx) =>
+                        <Next.Link href=e.url key={Js.Int.toString(idx)}>
+                          <a
+                            onClick=hideMobileMenu
+                            className="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+                            <span
+                              className="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-5 w-5 stroke-current fill-current stroke-2">
+                              {e.icon}
+                            </span>
+                            <span className="font-bold"> {React.string(e.label)} </span>
+                          </a>
+                        </Next.Link>,
+                      section.entries,
                     ),
-                  [content.principlesSection, content.resourcesSection, content.communitySection],
-                ),
-                [],
-              ) |> React.array}
-            </nav>
+                    [
+                      <h3
+                        className="ml-6 mt-2 px-3 font-semibold text-gray-400 uppercase"
+                        key={string_of_int(len)}>
+                        {React.string(section.header)}
+                      </h3>,
+                    ],
+                  )
+                }, [
+                  content.principlesSection,
+                  content.resourcesSection,
+                  content.communitySection,
+                ]), []) |> React.array} </nav>
           </div>
         </div>
       </div>

src/LogoCloud.res

@@ -64,12 +64,14 @@ let make = (~companies) =>
     <div className="mt-6 grid grid-cols-1 gap-0.5 md:grid-cols-3 lg:mt-8">
       {switch companies {
       | #LogoOnly(companies) =>
-        companies->Js.Array2.map((c: Company.t) =>
-          <div className="col-span-1"> <CompanyCard key=c.name company={#Required(c)} /> </div>
+        companies->Js.Array2.mapi((c: Company.t, idx) =>
+          <div className="col-span-1" key={string_of_int(idx)}>
+            <CompanyCard key=c.name company={#Required(c)} />
+          </div>
         )
       | #LogoWithText(companies) =>
-        companies->Js.Array2.map((c: CompanyOptionalLogo.t) =>
-          <CompanyCard key=c.name company={#Optional(c)} />
+        companies->Js.Array2.mapi((c: CompanyOptionalLogo.t, idx) =>
+          <div key={string_of_int(idx)}> <CompanyCard key=c.name company={#Optional(c)} /> </div>
         )
       }->React.array}
     </div>

src/MediaCarousel.res

@@ -74,7 +74,6 @@ let make = (
           <div className="col-span-6 py-2 flex m-w-full overflow-x-hidden">
             {items
             ->Belt.Array.mapWithIndex((id, item) => {
-              Js.log(item)
               <div
                 className="px-4 flex items-center justify-center"
                 key={string_of_int(id)}

src/Stats.res

@@ -44,21 +44,23 @@ let make = (~title: string, ~children as items: array<Item.t>) =>
           {
             let len = Belt.Array.length(items)
             React.array(
-              items->Belt.Array.mapWithIndex((i, item) => {
+              items->Belt.Array.mapWithIndex((idx, item) => {
                 let borderSizes = [
                   "sm:border-0",
-                  if i != len - 1 {
+                  if idx != len - 1 {
                     "border-b sm:border-r"
                   } else {
                     ""
                   },
-                  if i != 0 {
+                  if idx != 0 {
                     "border-t sm:border-l"
                   } else {
                     ""
                   },
                 ]->Js.String.concatMany(" ")
-                <Box label=item.label statValue=item.value borderSizes />
+                <div key={string_of_int(idx)}>
+                  <Box label=item.label statValue=item.value borderSizes />
+                </div>
               }),
             )
           }

src/Table.res

@@ -70,23 +70,24 @@ module Regular = {
             {
               let len = Belt.Array.length(columns)
               React.array(
-                columns->Belt.Array.mapWithIndexU((. i, column) => {
+                columns->Belt.Array.mapWithIndexU((. idx, column) => {
                   let rounding = {
                     [
-                      if i == 0 {
+                      if idx == 0 {
                         "rounded-tl"
                       } else {
                         ""
                       },
-                      if i == len - 1 {
+                      if idx == len - 1 {
                         "rounded-tr"
                       } else {
                         ""
                       },
                     ]->Js.String.concatMany(" ")
                   }
                   <th
-                    className={`py-2 px-3 ${rounding} sticky top-0 border-b border-gray-200 bg-yellow-300`}>
+                    className={`py-2 px-3 ${rounding} sticky top-0 border-b border-gray-200 bg-yellow-300`}
+                    key={string_of_int(idx)}>
                     {React.string(column.title)}
                   </th>
                 }),
@@ -100,9 +101,12 @@ module Regular = {
                   key={"r" ++ string_of_int(i)}
                   className="border-double border-t-4 border-gray-200 hover:bg-yellow-50">
                   {React.array(
-                    columns->Belt.Array.map(({title, component, className}) =>
-                      <td className> {React.createElement(component, map)} </td>
-                    ),
+                    columns->Belt.Array.mapWithIndex((idx, {title, component, className}) => {
+                      let _title = title
+                      <td className key={string_of_int(idx)}>
+                        {React.createElement(component, map)}
+                      </td>
+                    }),
                   )}
                 </tr>
               ),

src/VerticalHighlightCard.res

@@ -10,7 +10,7 @@ type item = {
 let make = (~title, ~buttonText, ~buttonRoute, ~lang, ~children) => {
   let (item1, item2, item3) = children
   let renderItem = (i, item) => {
-    <div>
+    <div key={string_of_int(i)}>
       <p className="text-orangedark text-7xl font-bold"> {React.string(`${string_of_int(i)}.`)} </p>
       // TODO: visual indicator that link will open new tab
       <p className="font-bold">