feat: add more before examples for helper plugin migration (#2209)

* feat: add more before examples for helper plugin migration

* Update docusaurus/docs/dev-docs/migration/v4-to-v5/additional-resources/helper-plugin.md

---------

Co-authored-by: Pierre Wizla <pwizla@users.noreply.github.com>

Author: jhoward1994

docusaurus/docs/dev-docs/migration/v4-to-v5/additional-resources/helper-plugin.md

@@ -26,6 +26,16 @@ This component has been removed and refactored to be part of the `Page` componen
 // Before
 import { AnErrorOccurred } from '@strapi/helper-plugin';
 
+const MyPage = () => {
+  // ...
+
+  if (error) {
+    return <AnErrorOccurred />;
+  }
+
+  // ...
+};
+
 // After
 import { Page } from '@strapi/strapi/admin';
 
@@ -44,7 +54,8 @@ const MyPage = () => {
 
 This component has been removed and not replaced. If you feel like you need this component, please open an issue on the Strapi repository to discuss your usecase.
 
-We recommend using the `Page.Protect` component from `@strapi/strapi/admin` instead. See below for an example. If you need to check permissions for a lower level component you can use the useRBAC hook.
+We recommend using the `Page.Protect` component from `@strapi/strapi/admin` instead (see [`CheckPagePermissions`](#checkpagepermissions) for an example). If you need to check permissions for a lower level component you can use [the `useRBAC` hook](#userbac).
+
 
 ### CheckPagePermissions
 
@@ -54,14 +65,24 @@ This component has been removed and refactored to be part of the `Page` componen
 // Before
 import { CheckPagePermissions } from '@strapi/helper-plugin';
 
+const MyProtectedPage = () => {
+  return (
+    <CheckPagePermissions
+        permissions={[action: 'plugin::my-plugin.read']}
+    >
+      <MyPag />
+    </CheckPagePermissions>
+  );
+};
+
 // After
 import { Page } from '@strapi/strapi/admin';
 
 const MyProtectedPage = () => {
+  <Page.Protect permissions={[action: 'plugin::my-plugin.read']}>
   return (
-    <Page.Protect permissions={[action: 'plugin::my-plugin.read']}>
-      <MyPage />
     </Page.Protect>
+      <MyPage />
   );
 };
 ```
@@ -102,10 +123,14 @@ import { DateTimePicker } from '@strapi/design-system';
 
 This component was previously deprecated and has now been removed. Similar to the deprecation notice, we recommend using the `Table` component from `@strapi/strapi/admin`.
 
+Please see the contributors [documentation for the `Table` component](https://v5.contributor.strapi.io/exports/namespaces/Table) for more information.
+
 ### EmptyBodyTable
 
 This component has been removed and is part of the `Table` component.
 
+Please see the contributors [documentation for the `Table` component](https://v5.contributor.strapi.io/exports/namespaces/Table) for more information.
+
 ### EmptyStateLayout
 
 This component has been removed and not replaced. You should use `EmptyStateLayout` from `@strapi/design-system`:
@@ -130,6 +155,13 @@ This component was moved to the `admin` package and can now be imported via the
 // Before
 import { FilterListURLQuery } from '@strapi/helper-plugin';
 
+const MyComponent = () => {
+  return (
+    <FilterListURLQuery filtersSchema={[{name: 'name', metadatas: {label: 'Name'}, fieldSchema: {type: 'string'}}]} />
+  );
+};
+
+
 // After
 import { Filters } from '@strapi/strapi/admin';
 
@@ -185,6 +217,19 @@ This component has been removed and refactored to become the `InputRenderer` com
 // Before
 import { GenericInput } from '@strapi/helper-plugin';
 
+const MyComponent = () => {
+  return (
+    <GenericInput
+      type={'type'}
+      hint={'hint'}
+      label={'label'}
+      name={'name'}
+      onChange={onMetaChange}
+      value={'value'}
+    />
+  );
+};
+
 // After
 import { InputRenderer } from '@strapi/strapi/admin';
 ```
@@ -264,6 +309,16 @@ This component has been removed and refactored to be part of the `Page` componen
 // Before
 import { LoadingIndicatorPage } from '@strapi/helper-plugin';
 
+const MyPage = () => {
+  // ...
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  // ...
+};
+
 // After
 import { Page } from '@strapi/strapi/admin';
 
@@ -283,6 +338,7 @@ const MyPage = () => {
 This component has been removed and not replaced, you should use the `EmptyStateLayout` component from `@strapi/design-system`.
 
 ```tsx
+// Before
 import { NoContent } from '@strapi/helper-plugin';
 
 <NoContent
@@ -315,6 +371,16 @@ This component has been removed and refactored to be part of the `Page` componen
 // Before
 import { NoPermissions } from '@strapi/helper-plugin';
 
+const MyPage = () => {
+  // ...
+
+  if (!canRead) {
+    return <NoPermissions />;
+  }
+
+  // ...
+};
+
 // After
 import { Page } from '@strapi/strapi/admin';
 
@@ -356,6 +422,12 @@ This component was moved to the `admin` package and can now be imported via the
 // Before
 import { PageSizeURLQuery } from '@strapi/helper-plugin';
 
+const MyComponent = () => {
+  return (
+    <PageSizeURLQuery options={['12', '24', '50', '100']} defaultValue="24" />
+  );
+};
+
 // After
 import { Pagination } from '@strapi/strapi/admin';
 
@@ -424,6 +496,16 @@ This component should be imported from the `@strapi/design-system` package:
 // Before
 import { Status } from '@strapi/helper-plugin';
 
+const MyComponent = () => {
+  return (
+    <Status variant={statusColor} showBullet={false} size="S">
+      <Typography fontWeight="bold" textColor={`${statusColor}700`}>
+        {stateMessage[status]}
+      </Typography>
+    </Status>
+  );
+};
+
 // After
 import { Status } from '@strapi/design-system';
 ```
@@ -436,6 +518,46 @@ This component should be imported from the `@strapi/strapi/admin` package:
 // Before
 import { Table } from '@strapi/helper-plugin';
 
+const MyComponent = () => {
+  return (
+    <Table colCount={2} rowCount={2}>
+      <Thead>
+        <Tr>
+          <Th>
+            <Typography variant="sigma" textColor="neutral600">
+              {`Name`}
+            </Typography>
+          </Th>
+          <Th>
+            <Typography variant="sigma" textColor="neutral600">
+              {`Description`}
+            </Typography>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {data?.map(({ name, description }) => {
+          return (
+            <Tr key={name}>
+              <Td>
+                <Typography textColor="neutral800" variant="omega" fontWeight="bold">
+                  {name}
+                </Typography>
+              </Td>
+              <Td>
+                <Typography textColor="neutral800">
+                  {description}
+                </Typography>
+              </Td>
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </Table>
+  );
+};
+
+
 // After
 import { Table } from '@strapi/strapi/admin';
 ```
@@ -789,6 +911,11 @@ This util has been removed. If you need to use it, you should use the `checkUser
 // Before
 import { hasPermissions } from '@strapi/helper-plugin';
 
+
+const permissions = await Promise.all(
+  generalSectionRawLinks.map(({ permissions }) => hasPermissions(userPermissions, permissions))
+);
+
 // After
 import { useAuth } from '@strapi/strapi/admin';
 
@@ -827,6 +954,8 @@ const prefixPluginTranslations = (
 };
 ```
 
+If you feel like you need this util, please open an issue on the Strapi repository to discuss your usecase.
+
 ### pxToRem
 
 This util has been removed and not replaced. You should use directly this code in place of the pxToRem: