chore(@kadena/react-ui): Update Grid naming convention

kadena-community · Nov 21, 2023 · 3035577 · 3035577 · vercel · Nov 21, 2023
2 parents eafd9a3 + 8829d32
commit 3035577
Show file tree

Hide file tree

Showing 27 changed files with 261 additions and 256 deletions.
diff --git a/.changeset/violet-oranges-exercise.md b/.changeset/violet-oranges-exercise.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx b/packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx
@@ -1,6 +1,6 @@
 import type { INavigation } from '@/Layout';
 import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
-import { Divider, Grid, Stack } from '@kadena/react-ui';
+import { Divider, Grid, GridItem, Stack } from '@kadena/react-ui';
 import classnames from 'classnames';
 import Link from 'next/link';
 import type { FC } from 'react';
@@ -41,11 +41,11 @@ export const BottomPageSection: FC<IProps> = ({
 
   return (
     <footer className={classes}>
-      <Grid.Root columns={{ sm: 1, lg: 3, xl: 4 }}>
-        <Grid.Item columnSpan={1}>
+      <Grid columns={{ xs: 1, lg: 3, xl: 4 }}>
+        <GridItem columnSpan={1}>
           <EditPage editLink={editLink} />
-        </Grid.Item>
-        <Grid.Item columnSpan={{ sm: 1, lg: 2, xl: 3 }}>
+        </GridItem>
+        <GridItem columnSpan={{ xs: 1, lg: 2, xl: 3 }}>
           <Stack
             width={{ xs: '100%', lg: '100%' }}
             direction="row"
@@ -74,8 +74,8 @@ export const BottomPageSection: FC<IProps> = ({
               </Link>
             )}
           </Stack>
-        </Grid.Item>
-      </Grid.Root>
+        </GridItem>
+      </Grid>
 
       <Divider />
       <Stack

diff --git a/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx b/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx
@@ -2,7 +2,14 @@ import type { IMostPopularPage } from '@/MostPopularData';
 import MostPopular from '@/components/MostPopular/MostPopular';
 import { SearchBar } from '@/components/SearchBar/SearchBar';
 import { EVENT_NAMES, analyticsEvent } from '@/utils/analytics';
-import { Box, GradientText, Grid, Heading, Stack } from '@kadena/react-ui';
+import {
+  Box,
+  GradientText,
+  Grid,
+  GridItem,
+  Heading,
+  Stack,
+} from '@kadena/react-ui';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import type { FC, KeyboardEvent } from 'react';
@@ -47,8 +54,8 @@ export const HomeHeader: FC<IProps> = ({ popularPages }) => {
     <header className={loaderHeaderClass}>
       <div className={wrapperClass}>
         <Box marginX={{ xs: '$1', sm: '$4' }}>
-          <Grid.Root columns={{ sm: 1, md: 2 }}>
-            <Grid.Item>
+          <Grid columns={{ sm: 1, md: 2 }}>
+            <GridItem>
               <Heading as="h1" variant="h2">
                 Kadena
               </Heading>
@@ -66,8 +73,8 @@ export const HomeHeader: FC<IProps> = ({ popularPages }) => {
                   </div>
                 </Box>
               </Stack>
-            </Grid.Item>
-            <Grid.Item>
+            </GridItem>
+            <GridItem>
               {popularPages.length > 0 && (
                 <Box
                   paddingLeft={{ sm: '$1', lg: '$15', xl: '$32', xxl: '$48' }}
@@ -76,8 +83,8 @@ export const HomeHeader: FC<IProps> = ({ popularPages }) => {
                   <MostPopular pages={popularPages} title="Most viewed docs" />
                 </Box>
               )}
-            </Grid.Item>
-          </Grid.Root>
+            </GridItem>
+          </Grid>
         </Box>
       </div>
     </header>

diff --git a/packages/apps/docs/src/pages/blogchain/index.tsx b/packages/apps/docs/src/pages/blogchain/index.tsx
@@ -19,7 +19,7 @@ import {
   getPathName,
 } from '@/utils/staticGeneration/checkSubTreeForActive.mjs';
 import { getData } from '@/utils/staticGeneration/getData.mjs';
-import { Box, Grid, Stack } from '@kadena/react-ui';
+import { Box, Grid, GridItem, Stack } from '@kadena/react-ui';
 import classNames from 'classnames';
 import type { GetStaticProps } from 'next';
 import Link from 'next/link';
@@ -54,11 +54,11 @@ const BlogChainHome: FC<IProps> = ({
             </BlogList>
           )}
 
-          <Grid.Root columns={{ sm: 1, lg: 4 }} gap="$2xl">
-            <Grid.Item columnSpan={3}>
+          <Grid columns={{ sm: 1, lg: 4 }} gap="$2xl">
+            <GridItem columnSpan={3}>
               <BlogListWrapper initPosts={allPosts} />
-            </Grid.Item>
-            <Grid.Item>
+            </GridItem>
+            <GridItem>
               <Box marginY="$8">
                 <Stack direction="column" gap="$8">
                   {popularPages.length > 0 && (
@@ -76,8 +76,8 @@ const BlogChainHome: FC<IProps> = ({
                   </Box>
                 </Stack>
               </Box>
-            </Grid.Item>
-          </Grid.Root>
+            </GridItem>
+          </Grid>
         </article>
       </div>
     </>

diff --git a/packages/apps/docs/src/pages/build/index.tsx b/packages/apps/docs/src/pages/build/index.tsx
@@ -16,6 +16,7 @@ import {
   Button,
   Card,
   Grid,
+  GridItem,
   Heading,
   Stack,
   Text,
@@ -33,8 +34,8 @@ interface IProps {
 const Home: FC<IProps> = ({ blogPosts, popularPages }) => {
   return (
     <>
-      <Grid.Root gap="$lg" columns={{ sm: 1, lg: 2 }}>
-        <Grid.Item>
+      <Grid gap="$lg" columns={{ sm: 1, lg: 2 }}>
+        <GridItem>
           <Card fullWidth>
             <Heading as="h4">Getting started tutorial</Heading>
             <Box marginY="$4">
@@ -52,20 +53,20 @@ const Home: FC<IProps> = ({ blogPosts, popularPages }) => {
               </Link>
             </Button>
           </Card>
-        </Grid.Item>
-        <Grid.Item>
+        </GridItem>
+        <GridItem>
           <Box marginY="$8" marginLeft="$12">
             <MostPopular
               pages={popularPages}
               title="Most viewed docs"
               titleAs="h6"
             />
           </Box>
-        </Grid.Item>
-      </Grid.Root>
+        </GridItem>
+      </Grid>
       <Box marginBottom="$20">
-        <Grid.Root gap="$lg" columns={{ sm: 1, lg: 2 }}>
-          <Grid.Item>
+        <Grid gap="$lg" columns={{ sm: 1, lg: 2 }}>
+          <GridItem>
             <DocsCard
               label="Quickstart"
               description="This Developer Quickstart is designed to remove the friction from onboarding so that you can understand how to build with Kadena quickly and easily."
@@ -105,8 +106,8 @@ const Home: FC<IProps> = ({ blogPosts, popularPages }) => {
                 </Link>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-          <Grid.Item>
+          </GridItem>
+          <GridItem>
             <DocsCard
               label="Cookbook"
               description="Use the right tools and platforms for building many types of decentralized applications."
@@ -122,8 +123,8 @@ const Home: FC<IProps> = ({ blogPosts, popularPages }) => {
                 </Link>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-        </Grid.Root>
+          </GridItem>
+        </Grid>
       </Box>
 
       <Stack direction="column" gap="$2xl">

diff --git a/packages/apps/docs/src/pages/contribute/index.tsx b/packages/apps/docs/src/pages/contribute/index.tsx
@@ -8,7 +8,7 @@ import {
   checkSubTreeForActive,
   getPathName,
 } from '@/utils/staticGeneration/checkSubTreeForActive.mjs';
-import { Box, Grid, Heading } from '@kadena/react-ui';
+import { Box, Grid, GridItem, Heading } from '@kadena/react-ui';
 import type { GetStaticProps } from 'next';
 import Link from 'next/link';
 import type { FC } from 'react';
@@ -22,8 +22,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
   return (
     <>
       <Box marginBottom="$20">
-        <Grid.Root gap="$lg" columns={{ sm: 1, lg: 2 }}>
-          <Grid.Item rowSpan={2}>
+        <Grid gap="$lg" columns={{ sm: 1, lg: 2 }}>
+          <GridItem rowSpan={2}>
             <DocsCard
               label="We are looking for Ambassadors"
               description="Since the launch of Kadena's public blockchain, we have had
@@ -40,8 +40,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
                 </Link>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-          <Grid.Item>
+          </GridItem>
+          <GridItem>
             <DocsCard
               label="Run a node"
               description=""
@@ -75,8 +75,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
                 </Link>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-          <Grid.Item>
+          </GridItem>
+          <GridItem>
             <DocsCard
               label="Contribute to the docs"
               description="The Kadena documentation is open source and hosted on GitHub.
@@ -93,8 +93,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
                 </Link>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-        </Grid.Root>
+          </GridItem>
+        </Grid>
       </Box>
 
       <Heading as="h6">Stay up-to-date</Heading>

diff --git a/packages/apps/docs/src/pages/index.tsx b/packages/apps/docs/src/pages/index.tsx
@@ -16,7 +16,7 @@ import {
   checkSubTreeForActive,
   getPathName,
 } from '@/utils/staticGeneration/checkSubTreeForActive.mjs';
-import { Box, Button, Grid, Heading, Stack } from '@kadena/react-ui';
+import { Box, Button, Grid, GridItem, Heading, Stack } from '@kadena/react-ui';
 import classNames from 'classnames';
 import type { GetStaticProps } from 'next';
 import Link from 'next/link';
@@ -38,8 +38,8 @@ const Home: FC<IProps> = ({ popularPages, blogPosts }) => {
       >
         <article className={articleClass}>
           <Box marginBottom="$20">
-            <Grid.Root gap="$lg" columns={{ sm: 1, md: 2 }}>
-              <Grid.Item rowSpan={2}>
+            <Grid gap="$lg" columns={{ sm: 1, md: 2 }}>
+              <GridItem rowSpan={2}>
                 <DocsCard
                   label="Introduction"
                   description="Kadena is the only platform offering a complete decentralized infrastructure for builders. Combining a revolutionary chain architecture with the tools needed for widespread adoption, your teams get the full capabilities of blockchain with the ability to go from concept to launch in days vs. months by not having to build from scratch. Learn about our core concepts."
@@ -58,8 +58,8 @@ const Home: FC<IProps> = ({ popularPages, blogPosts }) => {
                     </Link>
                   </BrowseSection>
                 </DocsCard>
-              </Grid.Item>
-              <Grid.Item>
+              </GridItem>
+              <GridItem>
                 <DocsCard
                   label="Learn through tutorials"
                   description="Find training and documentation and discover resources to assist you in learning. Whether you are just starting or an experienced professional, our hands-on approach helps you reach your goals faster, more confidently, and at your own pace."
@@ -92,8 +92,8 @@ const Home: FC<IProps> = ({ popularPages, blogPosts }) => {
                     </Link>
                   </BrowseSection>
                 </DocsCard>
-              </Grid.Item>
-              <Grid.Item>
+              </GridItem>
+              <GridItem>
                 <DocsCard
                   label="Setup"
                   description="Use the right tools and platforms for building many types of decentralized applications."
@@ -124,8 +124,8 @@ const Home: FC<IProps> = ({ popularPages, blogPosts }) => {
                     </Link>
                   </BrowseSection>
                 </DocsCard>
-              </Grid.Item>
-            </Grid.Root>
+              </GridItem>
+            </Grid>
           </Box>
 
           <Stack direction="column" gap="$3xl">

diff --git a/packages/apps/docs/src/pages/kadena/index.tsx b/packages/apps/docs/src/pages/kadena/index.tsx
@@ -8,7 +8,7 @@ import {
   checkSubTreeForActive,
   getPathName,
 } from '@/utils/staticGeneration/checkSubTreeForActive.mjs';
-import { Box, Grid, Heading, Stack } from '@kadena/react-ui';
+import { Box, Grid, GridItem, Heading, Stack } from '@kadena/react-ui';
 import type { GetStaticProps } from 'next';
 import Link from 'next/link';
 import type { FC } from 'react';
@@ -22,8 +22,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
   return (
     <Stack direction="column" gap="$2xl">
       <Box marginBottom="$20">
-        <Grid.Root gap="$lg" columns={{ sm: 1, lg: 2 }}>
-          <Grid.Item rowSpan={2}>
+        <Grid gap="$lg" columns={{ sm: 1, lg: 2 }}>
+          <GridItem rowSpan={2}>
             <DocsCard
               label="General"
               description="Kadena was founded on the idea that blockchain could revolutionize how the world interacts and transacts. But to get to mass adoption, chain technology and the ecosystem connecting it to the business world needed to be reimagined from the ground up. Our founders built a proprietary chain architecture and created the tools to make blockchain work for business – at speed, scale, and energy efficiency previously thought unachievable."
@@ -42,8 +42,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
                 </a>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-          <Grid.Item>
+          </GridItem>
+          <GridItem>
             <DocsCard
               label="Resources"
               description="Miscellaneous resources to make your Kadena journey easier."
@@ -65,8 +65,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
                 </Link>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-          <Grid.Item>
+          </GridItem>
+          <GridItem>
             <DocsCard
               label="Whitepapers"
               description="Read up on the different aspects of Kadena in our whitepapers."
@@ -88,8 +88,8 @@ const Home: FC<IProps> = ({ blogPosts }) => {
                 </Link>
               </BrowseSection>
             </DocsCard>
-          </Grid.Item>
-        </Grid.Root>
+          </GridItem>
+        </Grid>
       </Box>
 
       <Box>