chore: changed exports for layout components

strapi · May 3, 2024 · b249765 · b249765
1 parent f4d0c50
commit b249765
Show file tree

Hide file tree

Showing 69 changed files with 301 additions and 355 deletions.
diff --git a/...in/src/components/Layout/ActionLayout.tsx → ...n/src/components/Layouts/ActionLayout.tsx b/...in/src/components/Layout/ActionLayout.tsx → ...n/src/components/Layouts/ActionLayout.tsx
diff --git a/...n/src/components/Layout/ContentLayout.tsx → .../src/components/Layouts/ContentLayout.tsx b/...n/src/components/Layout/ContentLayout.tsx → .../src/components/Layouts/ContentLayout.tsx
diff --git a/...dmin/src/components/Layout/GridLayout.tsx → ...min/src/components/Layouts/GridLayout.tsx b/...dmin/src/components/Layout/GridLayout.tsx → ...min/src/components/Layouts/GridLayout.tsx
diff --git a/...in/src/components/Layout/HeaderLayout.tsx → ...n/src/components/Layouts/HeaderLayout.tsx b/...in/src/components/Layout/HeaderLayout.tsx → ...n/src/components/Layouts/HeaderLayout.tsx
diff --git a/...in/admin/src/components/Layout/Layout.tsx → ...n/admin/src/components/Layouts/Layout.tsx b/...in/admin/src/components/Layout/Layout.tsx → ...n/admin/src/components/Layouts/Layout.tsx
@@ -3,6 +3,11 @@ import * as React from 'react';
 import { Box } from '@strapi/design-system';
 import styled from 'styled-components';
 
+import { ActionLayout } from './ActionLayout';
+import { ContentLayout } from './ContentLayout';
+import { GridLayout } from './GridLayout';
+import { HeaderLayout, BaseHeaderLayout } from './HeaderLayout';
+
 interface LayoutProps {
   children: React.ReactNode;
   sideNav?: React.ReactNode;
@@ -17,7 +22,7 @@ const OverflowingItem = styled(Box)`
   overflow-x: hidden;
 `;
 
-const Layout = ({ sideNav, children }: LayoutProps) => {
+const RootLayout = ({ sideNav, children }: LayoutProps) => {
   return (
     <GridContainer hasSideNav={Boolean(sideNav)}>
       {sideNav}
@@ -26,9 +31,13 @@ const Layout = ({ sideNav, children }: LayoutProps) => {
   );
 };
 
-export { Layout, type LayoutProps };
+const Layouts = {
+  Root: RootLayout,
+  Header: HeaderLayout,
+  BaseHeader: BaseHeaderLayout,
+  Grid: GridLayout,
+  Action: ActionLayout,
+  Content: ContentLayout,
+};
 
-export * from './HeaderLayout';
-export * from './GridLayout';
-export * from './ActionLayout';
-export * from './ContentLayout';
+export { Layouts, type LayoutProps };
diff --git a/packages/core/admin/admin/src/index.ts b/packages/core/admin/admin/src/index.ts
@@ -71,4 +71,4 @@ export { getFetchClient } from './utils/getFetchClient';
  * Components
  */
 
-export * from './components/Layout/Layout';
+export { Layouts, type LayoutProps } from './components/Layouts/Layout';
diff --git a/packages/core/admin/admin/src/pages/HomePage.tsx b/packages/core/admin/admin/src/pages/HomePage.tsx
@@ -1,7 +1,16 @@
 import * as React from 'react';
 
-import { Box, Button, Flex, Grid, GridItem, Layout, Main, Typography } from '@strapi/design-system';
-import { Link, LinkButton } from '@strapi/design-system/v2';
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  Main,
+  Typography,
+  Link,
+  LinkButton,
+} from '@strapi/design-system';
 import {
   ArrowRight,
   CodeSquare,
@@ -23,6 +32,7 @@ import styled from 'styled-components';
 import { ContentBox } from '../components/ContentBox';
 import { GuidedTourHomepage } from '../components/GuidedTour/Homepage';
 import { useGuidedTour } from '../components/GuidedTour/Provider';
+import { Layouts } from '../components/Layouts/Layout';
 import { Page } from '../components/PageHelpers';
 import { useAppInfo } from '../features/AppInfo';
 import { useTracking } from '../features/Tracking';
@@ -65,7 +75,7 @@ const HomePageCE = () => {
   }
 
   return (
-    <Layout>
+    <Layouts.Root>
       <Page.Title>
         {formatMessage({
           id: 'HomePage.head.title',
@@ -136,7 +146,7 @@ const HomePageCE = () => {
           </Grid>
         </Box>
       </Main>
-    </Layout>
+    </Layouts.Root>
   );
 };
 

diff --git a/packages/core/admin/admin/src/pages/InstalledPluginsPage.tsx b/packages/core/admin/admin/src/pages/InstalledPluginsPage.tsx
@@ -4,9 +4,7 @@ import { Table, Tbody, Td, Th, Thead, Tr, Typography, useNotifyAT } from '@strap
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 
-import { ContentLayout } from '../components/Layout/ContentLayout';
-import { HeaderLayout } from '../components/Layout/HeaderLayout';
-import { Layout } from '../components/Layout/Layout';
+import { Layouts } from '../components/Layouts/Layout';
 import { Page } from '../components/PageHelpers';
 import { useNotification } from '../features/Notifications';
 import { useAPIErrorHandler } from '../hooks/useAPIErrorHandler';
@@ -52,9 +50,9 @@ const InstalledPluginsPage = () => {
   }
 
   return (
-    <Layout>
+    <Layouts.Root>
       <Page.Main>
-        <HeaderLayout
+        <Layouts.Header
           title={formatMessage({
             id: 'global.plugins',
             defaultMessage: 'Plugins',
@@ -64,7 +62,7 @@ const InstalledPluginsPage = () => {
             defaultMessage: 'List of the installed plugins in the project.',
           })}
         />
-        <ContentLayout>
+        <Layouts.Content>
           <Table colCount={2} rowCount={data?.plugins?.length ?? 0 + 1}>
             <Thead>
               <Tr>
@@ -111,9 +109,9 @@ const InstalledPluginsPage = () => {
               })}
             </Tbody>
           </Table>
-        </ContentLayout>
+        </Layouts.Content>
       </Page.Main>
-    </Layout>
+    </Layouts.Root>
   );
 };
 

diff --git a/packages/core/admin/admin/src/pages/InternalErrorPage.tsx b/packages/core/admin/admin/src/pages/InternalErrorPage.tsx
@@ -11,23 +11,22 @@ import { ArrowRight, EmptyPictures } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { ContentLayout } from '../components/Layout/ContentLayout';
-import { HeaderLayout } from '../components/Layout/HeaderLayout';
+import { Layouts } from '../components/Layouts/Layout';
 import { Page } from '../components/PageHelpers';
 
 export const InternalErrorPage = () => {
   const { formatMessage } = useIntl();
 
   return (
     <Page.Main labelledBy="title">
-      <HeaderLayout
+      <Layouts.Header
         id="title"
         title={formatMessage({
           id: 'content-manager.pageNotFound',
           defaultMessage: 'Page not found',
         })}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <EmptyStateLayout
           action={
             // @ts-expect-error We need to accept the props of the component passed in the `as` prop
@@ -46,7 +45,7 @@ export const InternalErrorPage = () => {
           icon={<EmptyPictures width="10rem" />}
           shadow="tableShadow"
         />
-      </ContentLayout>
+      </Layouts.Content>
     </Page.Main>
   );
 };
diff --git a/packages/core/admin/admin/src/pages/Marketplace/MarketplacePage.tsx b/packages/core/admin/admin/src/pages/Marketplace/MarketplacePage.tsx
@@ -4,7 +4,6 @@ import {
   Box,
   Flex,
   Icon,
-  Layout,
   Searchbar,
   Tab,
   TabGroup,
@@ -16,7 +15,7 @@ import { ExternalLink, GlassesSquare } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
 import { ContentBox } from '../../components/ContentBox';
-import { ContentLayout } from '../../components/Layout/ContentLayout';
+import { Layouts } from '../../components/Layouts/Layout';
 import { Page } from '../../components/PageHelpers';
 import { Pagination } from '../../components/Pagination';
 import { useTypedSelector } from '../../core/store/hooks';
@@ -163,7 +162,7 @@ const MarketplacePage = () => {
   const installedPackageNames = Object.keys(dependencies ?? {});
 
   return (
-    <Layout>
+    <Layouts.Root>
       <Page.Main>
         <Page.Title>
           {formatMessage({
@@ -172,7 +171,7 @@ const MarketplacePage = () => {
           })}
         </Page.Title>
         <PageHeader isOnline={isOnline} npmPackageType={npmPackageType} />
-        <ContentLayout>
+        <Layouts.Content>
           <TabGroup
             label={formatMessage({
               id: 'admin.pages.MarketPlacePage.tab-group.label',
@@ -296,9 +295,9 @@ const MarketplacePage = () => {
               />
             </a>
           </Box>
-        </ContentLayout>
+        </Layouts.Content>
       </Page.Main>
-    </Layout>
+    </Layouts.Root>
   );
 };
 

diff --git a/packages/core/admin/admin/src/pages/Marketplace/components/NpmPackagesGrid.tsx b/packages/core/admin/admin/src/pages/Marketplace/components/NpmPackagesGrid.tsx
@@ -3,7 +3,7 @@ import { EmptyDocuments } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { GridLayout } from '../../../components/Layout/GridLayout';
+import { Layouts } from '../../../components/Layouts/Layout';
 import { Page } from '../../../components/PageHelpers';
 import { AppInfoContextValue } from '../../../features/AppInfo';
 
@@ -51,13 +51,13 @@ const NpmPackagesGrid = ({
   if (npmPackages.length === 0) {
     return (
       <Box position="relative">
-        <GridLayout size="M">
+        <Layouts.Grid size="M">
           {Array(12)
             .fill(null)
             .map((_, idx) => (
               <EmptyPluginCard key={idx} height="234px" hasRadius />
             ))}
-        </GridLayout>
+        </Layouts.Grid>
         <Box position="absolute" top={11} width="100%">
           <Flex alignItems="center" justifyContent="center" direction="column">
             <Icon as={EmptyDocuments} color={undefined} width="160px" height="88px" />

diff --git a/packages/core/admin/admin/src/pages/Marketplace/components/OfflineLayout.tsx b/packages/core/admin/admin/src/pages/Marketplace/components/OfflineLayout.tsx
@@ -1,13 +1,15 @@
-import { Box, Flex, Layout, Main, Typography } from '@strapi/design-system';
+import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
+import { Layouts } from '../../../components/Layouts/Layout';
+
 import { PageHeader } from './PageHeader';
 
 const OfflineLayout = () => {
   const { formatMessage } = useIntl();
 
   return (
-    <Layout>
+    <Layouts.Root>
       <Main>
         <PageHeader />
         <Flex
@@ -49,7 +51,7 @@ const OfflineLayout = () => {
           </svg>
         </Flex>
       </Main>
-    </Layout>
+    </Layouts.Root>
   );
 };
 

diff --git a/packages/core/admin/admin/src/pages/Marketplace/components/PageHeader.tsx b/packages/core/admin/admin/src/pages/Marketplace/components/PageHeader.tsx
@@ -2,7 +2,7 @@ import { LinkButton } from '@strapi/design-system/v2';
 import { Upload } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 
-import { HeaderLayout } from '../../../components/Layout/HeaderLayout';
+import { Layouts } from '../../../components/Layouts/Layout';
 import { useTracking } from '../../../features/Tracking';
 
 import type { NpmPackageType } from '../MarketplacePage';
@@ -19,7 +19,7 @@ const PageHeader = ({ isOnline, npmPackageType = 'plugin' }: PageHeaderProps) =>
   const tracking = npmPackageType === 'provider' ? 'didSubmitProvider' : 'didSubmitPlugin';
 
   return (
-    <HeaderLayout
+    <Layouts.Header
       title={formatMessage({
         id: 'global.marketplace',
         defaultMessage: 'Marketplace',

diff --git a/packages/core/admin/admin/src/pages/NotFoundPage.tsx b/packages/core/admin/admin/src/pages/NotFoundPage.tsx
@@ -10,23 +10,22 @@ import { ArrowRight, EmptyPictures } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { ContentLayout } from '../components/Layout/ContentLayout';
-import { HeaderLayout } from '../components/Layout/HeaderLayout';
+import { Layouts } from '../components/Layouts/Layout';
 import { Page } from '../components/PageHelpers';
 
 export const NotFoundPage = () => {
   const { formatMessage } = useIntl();
 
   return (
     <Page.Main labelledBy="title">
-      <HeaderLayout
+      <Layouts.Header
         id="title"
         title={formatMessage({
           id: 'content-manager.pageNotFound',
           defaultMessage: 'Page not found',
         })}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <EmptyStateLayout
           action={
             // @ts-expect-error We need to accept the props of the component passed in the `as` prop
@@ -45,7 +44,7 @@ export const NotFoundPage = () => {
           icon={<EmptyPictures width="10rem" />}
           shadow="tableShadow"
         />
-      </ContentLayout>
+      </Layouts.Content>
     </Page.Main>
   );
 };
diff --git a/packages/core/admin/admin/src/pages/ProfilePage.tsx b/packages/core/admin/admin/src/pages/ProfilePage.tsx
@@ -8,8 +8,7 @@ import * as yup from 'yup';
 
 import { Form, FormHelpers } from '../components/Form';
 import { InputRenderer } from '../components/FormInputs/Renderer';
-import { ContentLayout } from '../components/Layout/ContentLayout';
-import { HeaderLayout } from '../components/Layout/HeaderLayout';
+import { Layouts } from '../components/Layouts/Layout';
 import { Page } from '../components/PageHelpers';
 import { useTypedDispatch, useTypedSelector } from '../core/store/hooks';
 import { useAuth } from '../features/Auth';
@@ -182,7 +181,7 @@ const ProfilePage = () => {
       >
         {({ isSubmitting, modified }) => (
           <>
-            <HeaderLayout
+            <Layouts.Header
               title={getDisplayName(user)}
               primaryAction={
                 <Button
@@ -196,13 +195,13 @@ const ProfilePage = () => {
               }
             />
             <Box paddingBottom={10}>
-              <ContentLayout>
+              <Layouts.Content>
                 <Flex direction="column" alignItems="stretch" gap={6}>
                   <UserInfoSection />
                   {!hasLockedRole && <PasswordSection />}
                   <PreferencesSection localeNames={localeNames} />
                 </Flex>
-              </ContentLayout>
+              </Layouts.Content>
             </Box>
           </>
         )}

diff --git a/packages/core/admin/admin/src/pages/Settings/Layout.tsx b/packages/core/admin/admin/src/pages/Settings/Layout.tsx
@@ -1,7 +1,7 @@
-import { Layout as DSLayout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { Navigate, Outlet, useMatch } from 'react-router-dom';
 
+import { Layouts } from '../../components/Layouts/Layout';
 import { Page } from '../../components/PageHelpers';
 import { useSettingsMenu } from '../../hooks/useSettingsMenu';
 
@@ -27,15 +27,15 @@ const Layout = () => {
   }
 
   return (
-    <DSLayout sideNav={<SettingsNav menu={menu} />}>
+    <Layouts.Root sideNav={<SettingsNav menu={menu} />}>
       <Page.Title>
         {formatMessage({
           id: 'global.settings',
           defaultMessage: 'Settings',
         })}
       </Page.Title>
       <Outlet />
-    </DSLayout>
+    </Layouts.Root>
   );
 };