chore: improve admin panel DX & add more advance plugin example

examples/getstarted/config/plugins.js

@@ -30,4 +30,9 @@ module.exports = () => ({
       testConf: 3,
     },
   },
+  // NOTE: set enabled:true to test with a pre-built plugin. Make sure to run yarn build in the plugin folder first
+  todo: {
+    enabled: false,
+    resolve: `../plugins/todo-example`, // From the /examples/plugins folder
+  },
 });

examples/getstarted/jsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react",
+    "module": "NodeNext",
     "moduleResolution": "nodenext",
     "target": "ES2021",
     "checkJs": true,

examples/plugins/todo-example/.gitignore

@@ -0,0 +1,204 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows
+# Edit at https://www.toptal.com/developers/gitignore?templates=node,macos,windows
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/node,macos,windows

examples/plugins/todo-example/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  endOfLine: 'lf',
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  printWidth: 100,
+};

examples/plugins/todo-example/README.md

@@ -0,0 +1 @@
+# strapi-plugin-todo-example

examples/plugins/todo-example/admin/src/components/TaskModal.jsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { Modal, Typography, Button, TextInput } from '@strapi/design-system';
+import {
+  unstable_useContentManagerContext as useContentManagerContext,
+  useFetchClient,
+} from '@strapi/strapi/admin';
+
+const TaskModal = ({ handleClose, refetchTasks, task = null, action, isOpen }) => {
+  const [name, setName] = React.useState(task?.name ?? '');
+  const [status, setStatus] = React.useState('');
+  const fetchClient = useFetchClient();
+
+  const { id, model } = useContentManagerContext();
+
+  const handleSubmit = async (e) => {
+    // Prevent submitting parent form
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      // Show loading state
+      setStatus('loading');
+
+      if (action === 'create') {
+        // Create task and link it to the related entry
+        await fetchClient.post('/todo/tasks', {
+          name,
+          isDone: false,
+          related: {
+            __type: model,
+            id,
+          },
+        });
+      } else if (action === 'edit') {
+        // Update task
+        await fetchClient.put(`/todo/tasks/${task.documentId}`, {
+          name,
+        });
+      }
+
+      // Refetch tasks list so it includes up to date data
+      await refetchTasks();
+
+      // Remove loading and close popup
+      setStatus('success');
+      setName('');
+
+      handleClose();
+    } catch (e) {
+      setStatus('error');
+    }
+  };
+
+  const getError = () => {
+    // Form validation error
+    if (name.length > 40) {
+      return 'Content is too long';
+    }
+    // API error
+    if (status === 'error') {
+      return 'Could not create todo';
+    }
+    return null;
+  };
+
+  return (
+    <Modal.Root
+      open={isOpen}
+      onOpenChange={() => {
+        handleClose();
+      }}
+    >
+      <Modal.Content aria-labelledby="title">
+        <Modal.Header>
+          <Typography fontWeight="bold" textColor="neutral800" tag="h2" id="title">
+            {action === 'create' && 'Add todo'}
+            {action === 'edit' && 'Edit todo'}
+          </Typography>
+        </Modal.Header>
+        <Modal.Body>
+          <TextInput
+            placeholder="What do you need to do?"
+            aria-label="Task name"
+            name="text"
+            onChange={(e) => setName(e.target.value)}
+            value={name}
+          />
+          {getError()}
+        </Modal.Body>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button onClick={handleClose} variant="tertiary">
+              Cancel
+            </Button>
+          </Modal.Close>
+          <Button type="submit" disabled={status === 'loading'} onClick={handleSubmit}>
+            {status === 'loading' ? 'Saving...' : 'Save'}
+          </Button>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
+
+export default TaskModal;

examples/plugins/todo-example/admin/src/components/TasksList.jsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Box, Flex, Checkbox, IconButton, Typography } from '@strapi/design-system';
+import { Trash, Pencil } from '@strapi/icons';
+import TaskModal from './TaskModal';
+import { useFetchClient } from '@strapi/strapi/admin';
+
+const Wrapper = styled(Flex)`
+  min-height: 2rem;
+
+  > :last-child {
+    visibility: hidden;
+  }
+
+  &:hover {
+    > :last-child {
+      visibility: visible;
+    }
+  }
+`;
+
+const TasksList = ({ tasks, status, refetchTasks, isCreatingEntry }) => {
+  const [taskBeingEdited, setTaskBeingEdited] = React.useState(null);
+  const fetchClient = useFetchClient();
+
+  const toggleTask = async (documentId, isChecked) => {
+    // Update task in database
+    await fetchClient.put(`/todo/tasks/${documentId}`, {
+      isDone: isChecked,
+    });
+
+    // Call API to update local cache
+    await refetchTasks();
+  };
+
+  const openEditModal = async (documentId) => {
+    setTaskBeingEdited(documentId);
+  };
+
+  const deleteTask = async (documentId) => {
+    await fetchClient.del(`/todo/tasks/${documentId}`);
+    await refetchTasks();
+  };
+
+  // Disabled
+  if (isCreatingEntry) {
+    return (
+      <Box paddingTop={6} color="neutral600" textAlign="center">
+        <Typography variant="omega">Save your entry to start managing todos.</Typography>
+      </Box>
+    );
+  }
+
+  // Loading state
+  if (status === 'loading') {
+    return (
+      <Box paddingTop={6} color="neutral600" textAlign="center">
+        Fetching todos...
+      </Box>
+    );
+  }
+
+  // Error state
+  if (status === 'error') {
+    return (
+      <Box paddingTop={6} color="danger600" textAlign="center">
+        Could not fetch tasks.
+      </Box>
+    );
+  }
+
+  // Empty state
+  if (tasks == null || tasks.length === 0) {
+    return (
+      <Box paddingTop={6} color="neutral600" textAlign="center">
+        No todo yet.
+      </Box>
+    );
+  }
+
+  // Success state, show all tasks
+  return (
+    <>
+      <TaskModal
+        key={taskBeingEdited || 'edit'}
+        action="edit"
+        handleClose={() => setTaskBeingEdited(null)}
+        refetchTasks={refetchTasks}
+        task={tasks.find((task) => task.documentId === taskBeingEdited)}
+        isOpen={taskBeingEdited !== null}
+      />
+
+      {tasks.map((task) => (
+        <Wrapper justifyContent="space-between" key={task.documentId}>
+          <Checkbox
+            checked={task.isDone}
+            onCheckedChange={(checked) => toggleTask(task.documentId, checked)}
+          >
+            <span
+              style={{
+                textDecoration: task.isDone ? 'line-through' : 'none',
+                display: 'inline-block',
+                transform: 'translateY(-1px)',
+              }}
+            >
+              {task.name}
+            </span>
+          </Checkbox>
+          <Flex direction={'row'} justifyContent="flex-end" gap={2}>
+            <IconButton label="Edit" onClick={() => openEditModal(task.documentId)}>
+              <Pencil />
+            </IconButton>
+            <IconButton label="Delete" onClick={() => deleteTask(task.documentId)}>
+              <Trash />
+            </IconButton>
+          </Flex>
+        </Wrapper>
+      ))}
+    </>
+  );
+};
+
+export default TasksList;

examples/plugins/todo-example/admin/src/components/TodoCard.jsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Box, Divider, Flex, TextButton, Typography } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+import { unstable_useContentManagerContext as useContentManagerContext } from '@strapi/strapi/admin';
+import TaskModal from './TaskModal';
+import useRelatedTasks from '../hooks/useRelatedTasks';
+import TasksList from './TasksList';
+
+const TodoCard = () => {
+  const [createModalIsShown, setCreateModalIsShown] = React.useState(false);
+  const { status, tasks, refetchTasks } = useRelatedTasks();
+
+  const { isCreatingEntry } = useContentManagerContext();
+
+  return (
+    <React.Fragment>
+      <TaskModal
+        action="create"
+        handleClose={() => setCreateModalIsShown(false)}
+        refetchTasks={refetchTasks}
+        isOpen={createModalIsShown}
+      />
+      <Box
+        aria-labelledy="additional-informations"
+        background="neutral0"
+        paddingBottom={4}
+        paddingLeft={4}
+        paddingRight={4}
+        paddingTop={3}
+        width={'100%'}
+      >
+        <Typography variant="sigma" textColor="neutral600" id="additional-informations">
+          Todos
+        </Typography>
+        <Box paddingTop={2} paddingBottom={6}>
+          <Box paddingBottom={2}>
+            <Divider />
+          </Box>
+          <Flex paddingTop={2} justifyContent="space-between">
+            <TextButton
+              startIcon={<Plus />}
+              onClick={() => setCreateModalIsShown(true)}
+              disabled={isCreatingEntry}
+            >
+              <Typography variant="omega" textColor={isCreatingEntry ? 'neutral600' : 'primary600'}>
+                Add todo
+              </Typography>
+            </TextButton>
+            <Typography textColor="neutral600" variant="omega" padding={3}>
+              {tasks.filter((task) => task.isDone).length}/{tasks.length}
+            </Typography>
+          </Flex>
+          <Box paddingTop={2}>
+            <TasksList
+              status={status}
+              tasks={tasks}
+              refetchTasks={refetchTasks}
+              isCreatingEntry={isCreatingEntry}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </React.Fragment>
+  );
+};
+
+export default TodoCard;

examples/plugins/todo-example/admin/src/hooks/useRelatedTasks.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+  useFetchClient,
+  unstable_useContentManagerContext as useContentManagerContext,
+} from '@strapi/strapi/admin';
+
+function useRelatedTasks() {
+  const fetchClient = useFetchClient();
+
+  const { model, id, isSingleType } = useContentManagerContext();
+
+  const [status, setStatus] = React.useState('loading');
+  const [tasks, setTasks] = React.useState([]);
+
+  const refetchTasks = React.useCallback(async () => {
+    try {
+      const { data } = await fetchClient.get(
+        `/todo/tasks/${model}?documentId=${isSingleType ? '' : id}`
+      );
+
+      setTasks(data);
+      setStatus('success');
+    } catch (e) {
+      setStatus('error');
+    }
+  }, [fetchClient, id, isSingleType, model]);
+
+  React.useEffect(() => {
+    refetchTasks();
+  }, [id, isSingleType, setTasks, setStatus, refetchTasks]);
+
+  return { status, tasks, refetchTasks };
+}
+
+export default useRelatedTasks;

examples/plugins/todo-example/admin/src/index.jsx

@@ -0,0 +1,42 @@
+import { prefixPluginTranslations } from './utils/prefixPluginTranslations';
+import TodoCard from './components/TodoCard';
+
+const name = 'todo-example';
+
+/** @type import('@strapi/strapi/admin').PluginDefinition */
+export default {
+  register(app) {
+    app.registerPlugin({
+      id: 'todo-example',
+      name,
+    });
+  },
+
+  bootstrap(app) {
+    app.getPlugin('content-manager').injectComponent('editView', 'right-links', {
+      name: 'my-plugin-my-compo',
+      Component: TodoCard,
+    });
+  },
+
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, name),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+    return Promise.resolve(importedTrads);
+  },
+};

examples/plugins/todo-example/admin/src/translations/en.json

@@ -0,0 +1 @@
+{}

examples/plugins/todo-example/admin/src/translations/fr.json

@@ -0,0 +1 @@
+{}

examples/plugins/todo-example/admin/src/utils/prefixPluginTranslations.js

@@ -0,0 +1,23 @@
+/**
+ * @typedef {Object.<string, string>} TradOptions
+ */
+
+/**
+ * Prefixes the keys of the translation object with the plugin ID.
+ *
+ * @param {TradOptions} trad - The translation object.
+ * @param {string} pluginId - The plugin ID to prefix.
+ * @returns {TradOptions} - The new translation object with prefixed keys.
+ * @throws {TypeError} - If the pluginId is empty.
+ */
+export function prefixPluginTranslations(trad, pluginId) {
+  if (!pluginId) {
+    throw new TypeError("pluginId can't be empty");
+  }
+
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = trad[current];
+
+    return acc;
+  }, {});
+}

examples/plugins/todo-example/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "target": "ES2021",
+    "checkJs": true,
+    "allowJs": true
+  }
+}

examples/plugins/todo-example/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "strapi-plugin-todo-example",
+  "version": "0.0.0",
+  "description": "Keep track of your content management with todo lists",
+  "license": "SEE LICENSE IN LICENSE",
+  "exports": {
+    "./package.json": "./package.json",
+    "./strapi-admin": {
+      "source": "./admin/src/index.jsx",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
+    },
+    "./strapi-server": {
+      "source": "./server/src/index.js",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "scripts": {
+    "build": "strapi-plugin build",
+    "watch": "strapi-plugin watch",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "@strapi/strapi": "workspace:*"
+  },
+  "dependencies": {
+    "@strapi/design-system": "2.0.0-rc.10",
+    "@strapi/icons": "2.0.0-rc.10",
+    "eslint": "8.50.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "devDependencies": {
+    "@strapi/sdk-plugin": "^5.2.0",
+    "@strapi/strapi": "workspace:*"
+  },
+  "engines": {
+    "node": ">=12.x.x <=20.x.x",
+    "npm": ">=6.0.0"
+  },
+  "strapi": {
+    "name": "todo-example",
+    "displayName": "Todo example",
+    "description": "Keep track of your content management with todo lists.",
+    "kind": "plugin"
+  }
+}

examples/plugins/todo-example/server/src/content-types/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const task = require('./task');
+
+module.exports = {
+  task: { schema: task },
+};

examples/plugins/todo-example/server/src/content-types/task.js

@@ -0,0 +1,36 @@
+module.exports = {
+  info: {
+    tableName: 'task',
+    singularName: 'task', // kebab-case mandatory
+    pluralName: 'tasks', // kebab-case mandatory
+    displayName: 'Task',
+    description: 'A task in Strapi',
+    kind: 'collectionType',
+  },
+  options: {
+    draftAndPublish: false,
+  },
+  pluginOptions: {
+    'content-manager': {
+      visible: false,
+    },
+    'content-type-builder': {
+      visible: false,
+    },
+  },
+  attributes: {
+    name: {
+      type: 'string',
+      required: true,
+      maxLength: 40,
+    },
+    isDone: {
+      type: 'boolean',
+      default: false,
+    },
+    related: {
+      type: 'relation',
+      relation: 'morphToOne',
+    },
+  },
+};

examples/plugins/todo-example/server/src/controllers/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  tasks: require('./tasks'),
+};

examples/plugins/todo-example/server/src/controllers/tasks.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const { getService } = require('../utils');
+
+const controller = {
+  async createTask(ctx) {
+    return getService('tasks').createTask(ctx.request.body);
+  },
+
+  async updateTask(ctx) {
+    const data = ctx.request.body;
+    const { documentId } = ctx.params;
+    return getService('tasks').updateTask({ documentId, data });
+  },
+
+  async deleteTask(ctx) {
+    const { documentId } = ctx.params;
+
+    return getService('tasks').deleteTask(documentId);
+  },
+
+  async listRelatedTasks(ctx) {
+    const { slug } = ctx.params;
+    const { documentId } = ctx.query;
+    return getService('tasks').listRelatedTasks({ slug, documentId });
+  },
+};
+
+module.exports = controller;

examples/plugins/todo-example/server/src/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const contentTypes = require('./content-types');
+const controllers = require('./controllers');
+const routes = require('./routes');
+const services = require('./services');
+
+module.exports = {
+  controllers,
+  routes,
+  services,
+  contentTypes,
+};

examples/plugins/todo-example/server/src/routes/admin.js

@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = {
+  type: 'admin',
+  routes: [
+    {
+      method: 'POST',
+      path: '/tasks',
+      handler: 'tasks.createTask',
+    },
+    {
+      method: 'PUT',
+      path: '/tasks/:documentId',
+      handler: 'tasks.updateTask',
+    },
+    {
+      method: 'DELETE',
+      path: '/tasks/:documentId',
+      handler: 'tasks.deleteTask',
+    },
+    {
+      method: 'GET',
+      path: '/tasks/:slug',
+      handler: 'tasks.listRelatedTasks',
+    },
+  ],
+};

examples/plugins/todo-example/server/src/routes/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  admin: require('./admin'),
+};

examples/plugins/todo-example/server/src/services/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  tasks: require('./tasks'),
+};

examples/plugins/todo-example/server/src/services/tasks.js

@@ -0,0 +1,32 @@
+'use strict';
+
+module.exports = ({ strapi }) => ({
+  async createTask(data) {
+    return strapi.documents('plugin::todo.task').create({ data });
+  },
+
+  async updateTask({ documentId, data }) {
+    return strapi.documents('plugin::todo.task').update({
+      documentId,
+      data,
+    });
+  },
+
+  async deleteTask(documentId) {
+    return strapi.documents('plugin::todo.task').delete({
+      documentId,
+    });
+  },
+
+  async listRelatedTasks({ documentId, slug }) {
+    return strapi.db.query('plugin::todo.task').findMany({
+      where: {
+        // Only pass the related ID if it's pointing to a collection type
+        ...(documentId !== '' && {
+          target_id: documentId,
+        }),
+        target_type: slug,
+      },
+    });
+  },
+});

examples/plugins/todo-example/server/src/utils/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+// Retrieve a local service
+function getService(name) {
+  return strapi.plugin('todo').service(name);
+}
+
+module.exports = {
+  getService,
+};

examples/plugins/todo-example/strapi-server.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/server');

package.json

@@ -26,6 +26,7 @@
     "packages/*/*",
     "examples/*",
     "examples/plugins/*",
+    "examples/*/src/plugins/*",
     ".github/actions/*",
     "scripts/*"
   ],

packages/core/admin/admin/src/StrapiApp.tsx

@@ -50,14 +50,15 @@ interface StrapiAppConstructorArgs extends Partial<Pick<StrapiApp, 'appPlugins'>
   };
 }
 
+type Translation = { data: Record<string, string>; locale: string };
+type Translations = Array<Translation>;
+
 interface StrapiAppPlugin {
-  bootstrap: (
+  bootstrap?: (
     args: Pick<StrapiApp, 'addSettingsLink' | 'addSettingsLinks' | 'getPlugin' | 'registerHook'>
   ) => void;
   register: (app: StrapiApp) => void;
-  registerTrads: (args: {
-    locales: string[];
-  }) => Promise<{ data: Record<string, string>; locale: string }[]>;
+  registerTrads?: (args: { locales: string[] }) => Promise<Translations>;
 }
 
 interface InjectionZoneComponent {
@@ -364,8 +365,6 @@ class StrapiApp {
       })
       .filter((a) => a);
 
-    type Translation = Awaited<ReturnType<StrapiAppPlugin['registerTrads']>>[number];
-
     const pluginsTrads = (await Promise.all(arrayOfPromises)) as Array<Translation[]>;
     const mergedTrads = pluginsTrads.reduce<{ [locale: string]: Translation['data'] }>(
       (acc, currentPluginTrads) => {

packages/core/admin/admin/src/index.ts

@@ -1,3 +1,5 @@
+import { StrapiAppPlugin } from './StrapiApp';
+
 /**
  * DO NOT REMOVE. This export is what's used to render the admin panel at all.
  * Without it === no admin panel.
@@ -76,3 +78,5 @@ export type { CMAdminConfiguration } from './types/adminConfiguration';
  */
 
 export { Layouts, type LayoutProps } from './components/Layouts/Layout';
+
+export type PluginDefinition = StrapiAppPlugin;

packages/core/content-manager/admin/src/exports.ts

@@ -6,7 +6,10 @@
 
 export { buildValidParams } from './utils/api';
 
-export { useDocument as unstable_useDocument } from './hooks/useDocument';
+export {
+  useDocument as unstable_useDocument,
+  useContentManagerContext as unstable_useContentManagerContext,
+} from './hooks/useDocument';
 export { useDocumentActions as unstable_useDocumentActions } from './hooks/useDocumentActions';
 export { useDocumentLayout as unstable_useDocumentLayout } from './hooks/useDocumentLayout';
 export type {

packages/core/content-manager/admin/src/hooks/useDocument.ts

@@ -12,6 +12,7 @@ import {
   useQueryParams,
   FormErrors,
   getYupValidationErrors,
+  useForm,
 } from '@strapi/admin/strapi-admin';
 import { Modules } from '@strapi/types';
 import { useParams } from 'react-router-dom';
@@ -23,6 +24,7 @@ import { buildValidParams } from '../utils/api';
 import { createYupSchema } from '../utils/validation';
 
 import { useContentTypeSchema, ComponentsDictionary } from './useContentTypeSchema';
+import { useDocumentLayout } from './useDocumentLayout';
 
 import type { FindOne } from '../../../shared/contracts/collection-types';
 import type { ContentType } from '../../../shared/contracts/content-types';
@@ -56,6 +58,7 @@ type UseDocument = (
    * This is the schema of the content type, it is not the same as the layout.
    */
   schema?: Schema;
+  schemas?: Schema[];
   validate: (document: Document) => null | FormErrors;
 };
 
@@ -104,7 +107,12 @@ const useDocument: UseDocument = (args, opts) => {
     skip: (!args.documentId && args.collectionType !== SINGLE_TYPES) || opts?.skip,
   });
 
-  const { components, schema, isLoading: isLoadingSchema } = useContentTypeSchema(args.model);
+  const {
+    components,
+    schema,
+    schemas,
+    isLoading: isLoadingSchema,
+  } = useContentTypeSchema(args.model);
 
   React.useEffect(() => {
     if (error) {
@@ -153,6 +161,7 @@ const useDocument: UseDocument = (args, opts) => {
     meta: data?.meta,
     isLoading,
     schema,
+    schemas,
     validate,
   } satisfies ReturnType<UseDocument>;
 };
@@ -196,5 +205,61 @@ const useDoc = () => {
   };
 };
 
-export { useDocument, useDoc };
+/**
+ * @public
+ * @experimental
+ * Content manager context hooks for plugin development.
+ * Make sure to use this hook inside the content manager.
+ */
+const useContentManagerContext = () => {
+  const {
+    collectionType,
+    model,
+    id,
+    components,
+    isLoading: isLoadingDoc,
+    schema,
+    schemas,
+  } = useDoc();
+
+  const layout = useDocumentLayout(model);
+
+  const form = useForm('useContentManagerContext', (state) => state);
+
+  const isSingleType = collectionType === SINGLE_TYPES;
+  const slug = model;
+  const isCreatingEntry = id === 'create';
+
+  const {} = useContentTypeSchema();
+
+  const isLoading = isLoadingDoc || layout.isLoading;
+  const error = layout.error;
+
+  return {
+    error,
+    isLoading,
+
+    // Base metadata
+    model,
+    collectionType,
+    id,
+    slug,
+    isCreatingEntry,
+    isSingleType,
+    hasDraftAndPublish: schema?.options?.draftAndPublish ?? false,
+
+    // All schema infos
+    components,
+    contentType: schema,
+    contentTypes: schemas,
+
+    // Form state
+    form,
+
+    // layout infos
+    layout,
+  };
+};
+
+export { useDocument, useDoc, useContentManagerContext };
 export type { UseDocument, UseDocumentArgs, Document, Schema, ComponentsDictionary };

packages/core/strapi/src/admin.ts

@@ -31,3 +31,11 @@ export { render as renderAdmin };
 export type { RenderAdminArgs };
 
 export * from '@strapi/admin/strapi-admin';
+
+export {
+  unstable_useDocumentLayout,
+  unstable_useDocumentActions,
+  unstable_useDocument,
+  unstable_useContentManagerContext,
+  useDocumentRBAC,
+} from '@strapi/content-manager/strapi-admin';

yarn.lock

@@ -3115,6 +3115,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
+  dependencies:
+    "@emotion/memoize": "npm:^0.8.1"
+  checksum: 10c0/bb1530dcb4e0e5a4fabb219279f2d0bc35796baf66f6241f98b0d03db1985c890a8cafbea268e0edefd5eeda143dbd5c09a54b5fba74cee8c69b98b13194af50
+  languageName: node
+  linkType: hard
+
 "@emotion/memoize@npm:^0.8.0":
   version: 0.8.0
   resolution: "@emotion/memoize@npm:0.8.0"
@@ -3180,6 +3189,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/unitless@npm:0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 10c0/a1ed508628288f40bfe6dd17d431ed899c067a899fa293a13afe3aed1d70fac0412b8a215fafab0b42829360db687fecd763e5f01a64ddc4a4b58ec3112ff548
+  languageName: node
+  linkType: hard
+
 "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0":
   version: 1.0.0
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.0"
@@ -4776,6 +4792,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
+  checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.14
   resolution: "@jridgewell/trace-mapping@npm:0.3.14"
@@ -6874,7 +6897,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^5.1.0":
+"@remix-run/router@npm:1.19.1":
+  version: 1.19.1
+  resolution: "@remix-run/router@npm:1.19.1"
+  checksum: 10c0/9101fc96646e5107b6b0ef248d4c93bd965590c37ac02d35bcc57d1902467db7fc6eeec0a1fb97d0ce5bc96fae58e75239555e44a983239a61badba18e82d3b8
+  languageName: node
+  linkType: hard
+
+"@rollup/plugin-commonjs@npm:^26.0.1":
+  version: 26.0.1
+  resolution: "@rollup/plugin-commonjs@npm:26.0.1"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.0.1"
+    commondir: "npm:^1.0.1"
+    estree-walker: "npm:^2.0.2"
+    glob: "npm:^10.4.1"
+    is-reference: "npm:1.2.1"
+    magic-string: "npm:^0.30.3"
+  peerDependencies:
+    rollup: ^2.68.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10c0/483290d327bdb4147584c37d73e47df2c717735f1902cd2f66ebc83c7b40ae10e5a8d5e626f24b76ad4ac489eab4a8c13869410aad663810848b0abc89a630cf
+  languageName: node
+  linkType: hard
+
+"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.1.0":
   version: 5.1.0
   resolution: "@rollup/pluginutils@npm:5.1.0"
   dependencies:
@@ -7252,6 +7301,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sec-ant/readable-stream@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "@sec-ant/readable-stream@npm:0.4.1"
+  checksum: 10c0/64e9e9cf161e848067a5bf60cdc04d18495dc28bb63a8d9f8993e4dd99b91ad34e4b563c85de17d91ffb177ec17a0664991d2e115f6543e73236a906068987af
+  languageName: node
+  linkType: hard
+
 "@sendgrid/client@npm:^7.7.0":
   version: 7.7.0
   resolution: "@sendgrid/client@npm:7.7.0"
@@ -7437,6 +7493,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@sindresorhus/merge-streams@npm:4.0.0"
+  checksum: 10c0/482ee543629aa1933b332f811a1ae805a213681ecdd98c042b1c1b89387df63e7812248bb4df3910b02b3cc5589d3d73e4393f30e197c9dde18046ccd471fc6b
+  languageName: node
+  linkType: hard
+
 "@sindresorhus/slugify@npm:1.1.0":
   version: 1.1.0
   resolution: "@sindresorhus/slugify@npm:1.1.0"
@@ -9434,6 +9497,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@strapi/sdk-plugin@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@strapi/sdk-plugin@npm:5.2.0"
+  dependencies:
+    "@rollup/plugin-commonjs": "npm:^26.0.1"
+    "@strapi/pack-up": "npm:>=5.0.1-alpha.1 <6.0.0"
+    "@types/prompts": "npm:2.4.9"
+    boxen: "npm:5.1.2"
+    chalk: "npm:4.1.2"
+    commander: "npm:12.1.0"
+    concurrently: "npm:^8.2.2"
+    execa: "npm:^9.3.1"
+    get-latest-version: "npm:5.1.0"
+    git-url-parse: "npm:13.1.1"
+    nodemon: "npm:^3.1.0"
+    ora: "npm:5.4.1"
+    outdent: "npm:0.8.0"
+    pkg-up: "npm:3.1.0"
+    prettier: "npm:2.8.8"
+    typescript: "npm:5.4.4"
+    yup: "npm:0.32.9"
+  bin:
+    strapi-plugin: bin/strapi-plugin.js
+  checksum: 10c0/8e62f36e937049a000b2b09c6388c027eac40b3c61c8874a34faea4b93a520f0e95f44e2e182a8fff62dfe53b28cc2579488b5122a94c1909165f4c9dbe77096
+  languageName: node
+  linkType: hard
+
 "@strapi/strapi@workspace:*, @strapi/strapi@workspace:packages/core/strapi":
   version: 0.0.0-use.local
   resolution: "@strapi/strapi@workspace:packages/core/strapi"
@@ -11365,6 +11455,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 10c0/23f5b35a3a04f6bb31a29d404fa1bc8e0035fcaff2356b4047743a057e0c37b2eba7efe14d57dd2b95b398cea3bac294d9c6cd93ed307d8c0b7f5d282224b469
+  languageName: node
+  linkType: hard
+
 "@types/swagger-ui-dist@npm:3.30.4":
   version: 3.30.4
   resolution: "@types/swagger-ui-dist@npm:3.30.4"
@@ -15336,6 +15433,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:3.1.3":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2":
   version: 3.1.0
   resolution: "csstype@npm:3.1.0"
@@ -17745,6 +17849,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"execa@npm:^9.3.1":
+  version: 9.3.1
+  resolution: "execa@npm:9.3.1"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^4.0.0"
+    cross-spawn: "npm:^7.0.3"
+    figures: "npm:^6.1.0"
+    get-stream: "npm:^9.0.0"
+    human-signals: "npm:^8.0.0"
+    is-plain-obj: "npm:^4.1.0"
+    is-stream: "npm:^4.0.1"
+    npm-run-path: "npm:^5.2.0"
+    pretty-ms: "npm:^9.0.0"
+    signal-exit: "npm:^4.1.0"
+    strip-final-newline: "npm:^4.0.0"
+    yoctocolors: "npm:^2.0.0"
+  checksum: 10c0/113979ff56575f6cb69fd021eb3894a674fb59b264f5e8c2b9b30e301629abc4f44cee881e680f9fb3b7d4956645df76a2d8c0006869dea985f96ec65f07b226
+  languageName: node
+  linkType: hard
+
 "executable@npm:^4.1.0":
   version: 4.1.1
   resolution: "executable@npm:4.1.1"
@@ -18068,6 +18192,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"figures@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "figures@npm:6.1.0"
+  dependencies:
+    is-unicode-supported: "npm:^2.0.0"
+  checksum: 10c0/9159df4264d62ef447a3931537de92f5012210cf5135c35c010df50a2169377581378149abfe1eb238bd6acbba1c0d547b1f18e0af6eee49e30363cedaffcfe4
+  languageName: node
+  linkType: hard
+
 "file-entry-cache@npm:^6.0.1":
   version: 6.0.1
   resolution: "file-entry-cache@npm:6.0.1"
@@ -18862,6 +18995,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-stream@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "get-stream@npm:9.0.1"
+  dependencies:
+    "@sec-ant/readable-stream": "npm:^0.4.1"
+    is-stream: "npm:^4.0.1"
+  checksum: 10c0/d70e73857f2eea1826ac570c3a912757dcfbe8a718a033fa0c23e12ac8e7d633195b01710e0559af574cbb5af101009b42df7b6f6b29ceec8dbdf7291931b948
+  languageName: node
+  linkType: hard
+
 "get-symbol-description@npm:^1.0.0":
   version: 1.0.0
   resolution: "get-symbol-description@npm:1.0.0"
@@ -19110,6 +19253,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:^10.4.1":
+  version: 10.4.5
+  resolution: "glob@npm:10.4.5"
+  dependencies:
+    foreground-child: "npm:^3.1.0"
+    jackspeak: "npm:^3.1.2"
+    minimatch: "npm:^9.0.4"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^1.11.1"
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 10c0/19a9759ea77b8e3ca0a43c2f07ecddc2ad46216b786bb8f993c445aee80d345925a21e5280c7b7c6c59e860a0154b84e4b2b60321fea92cd3c56b4a7489f160e
+  languageName: node
+  linkType: hard
+
 "glob@npm:^7.0.5, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:~7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
@@ -19964,6 +20123,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"human-signals@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "human-signals@npm:8.0.0"
+  checksum: 10c0/e4dac4f7d3eb791ed04129fc6a85bd454a9102d3e3b76c911d0db7057ebd60b2956b435b5b5712aec18960488ede3c21ef7c56e42cdd70760c0d84d3c05cd92e
+  languageName: node
+  linkType: hard
+
 "humanize-ms@npm:^1.2.1":
   version: 1.2.1
   resolution: "humanize-ms@npm:1.2.1"
@@ -20862,6 +21028,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-reference@npm:1.2.1":
+  version: 1.2.1
+  resolution: "is-reference@npm:1.2.1"
+  dependencies:
+    "@types/estree": "npm:*"
+  checksum: 10c0/7dc819fc8de7790264a0a5d531164f9f5b9ef5aa1cd05f35322d14db39c8a2ec78fd5d4bf57f9789f3ddd2b3abeea7728432b759636157a42db12a9e8c3b549b
+  languageName: node
+  linkType: hard
+
 "is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
@@ -20941,6 +21116,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-stream@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "is-stream@npm:4.0.1"
+  checksum: 10c0/2706c7f19b851327ba374687bc4a3940805e14ca496dc672b9629e744d143b1ad9c6f1b162dece81c7bfbc0f83b32b61ccc19ad2e05aad2dd7af347408f60c7f
+  languageName: node
+  linkType: hard
+
 "is-string@npm:^1.0.5, is-string@npm:^1.0.7":
   version: 1.0.7
   resolution: "is-string@npm:1.0.7"
@@ -21033,6 +21215,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-unicode-supported@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "is-unicode-supported@npm:2.0.0"
+  checksum: 10c0/3013dfb8265fe9f9a0d1e9433fc4e766595631a8d85d60876c457b4bedc066768dab1477c553d02e2f626d88a4e019162706e04263c94d74994ef636a33b5f94
+  languageName: node
+  linkType: hard
+
 "is-upper-case@npm:^1.1.0":
   version: 1.1.2
   resolution: "is-upper-case@npm:1.1.2"
@@ -21247,6 +21436,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jackspeak@npm:^3.1.2":
+  version: 3.4.3
+  resolution: "jackspeak@npm:3.4.3"
+  dependencies:
+    "@isaacs/cliui": "npm:^8.0.2"
+    "@pkgjs/parseargs": "npm:^0.11.0"
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: 10c0/6acc10d139eaefdbe04d2f679e6191b3abf073f111edf10b1de5302c97ec93fffeb2fdd8681ed17f16268aa9dd4f8c588ed9d1d3bffbbfa6e8bf897cbb3149b9
+  languageName: node
+  linkType: hard
+
 "jake@npm:^10.8.5":
   version: 10.8.5
   resolution: "jake@npm:10.8.5"
@@ -23297,6 +23499,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.3":
+  version: 0.30.11
+  resolution: "magic-string@npm:0.30.11"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10c0/b9eb370773d0bd90ca11a848753409d8e5309b1ad56d2a1aa49d6649da710a6d2fe7237ad1a643c5a5d3800de2b9946ed9690acdfc00e6cc1aeafff3ab1752c4
+  languageName: node
+  linkType: hard
+
 "mailcomposer@npm:3.12.0":
   version: 3.12.0
   resolution: "mailcomposer@npm:3.12.0"
@@ -23879,6 +24090,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^9.0.4":
+  version: 9.0.5
+  resolution: "minimatch@npm:9.0.5"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10c0/de96cf5e35bdf0eab3e2c853522f98ffbe9a36c37797778d2665231ec1f20a9447a7e567cb640901f89e4daaa95ae5d70c65a9e8aa2bb0019b6facbc3c0575ed
+  languageName: node
+  linkType: hard
+
 "minimist-options@npm:4.1.0":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
@@ -24949,6 +25169,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"npm-run-path@npm:^5.2.0":
+  version: 5.3.0
+  resolution: "npm-run-path@npm:5.3.0"
+  dependencies:
+    path-key: "npm:^4.0.0"
+  checksum: 10c0/124df74820c40c2eb9a8612a254ea1d557ddfab1581c3e751f825e3e366d9f00b0d76a3c94ecd8398e7f3eee193018622677e95816e8491f0797b21e30b2deba
+  languageName: node
+  linkType: hard
+
 "npmlog@npm:^6.0.0, npmlog@npm:^6.0.2":
   version: 6.0.2
   resolution: "npmlog@npm:6.0.2"
@@ -25635,6 +25864,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"package-json-from-dist@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "package-json-from-dist@npm:1.0.0"
+  checksum: 10c0/e3ffaf6ac1040ab6082a658230c041ad14e72fabe99076a2081bb1d5d41210f11872403fc09082daf4387fc0baa6577f96c9c0e94c90c394fd57794b66aa4033
+  languageName: node
+  linkType: hard
+
 "package-json@npm:7.0.0":
   version: 7.0.0
   resolution: "package-json@npm:7.0.0"
@@ -25750,6 +25986,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-ms@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "parse-ms@npm:4.0.0"
+  checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16
+  languageName: node
+  linkType: hard
+
 "parse-passwd@npm:^1.0.0":
   version: 1.0.0
   resolution: "parse-passwd@npm:1.0.0"
@@ -26002,6 +26245,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-scurry@npm:^1.11.1":
+  version: 1.11.1
+  resolution: "path-scurry@npm:1.11.1"
+  dependencies:
+    lru-cache: "npm:^10.2.0"
+    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
+  checksum: 10c0/32a13711a2a505616ae1cc1b5076801e453e7aae6ac40ab55b388bb91b9d0547a52f5aaceff710ea400205f18691120d4431e520afbe4266b836fadede15872d
+  languageName: node
+  linkType: hard
+
 "path-to-regexp@npm:0.1.7":
   version: 0.1.7
   resolution: "path-to-regexp@npm:0.1.7"
@@ -26368,6 +26621,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.38, postcss@npm:^8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.3.11":
   version: 8.4.33
   resolution: "postcss@npm:8.4.33"
@@ -26401,17 +26665,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.38":
-  version: 8.4.38
-  resolution: "postcss@npm:8.4.38"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.0"
-    source-map-js: "npm:^1.2.0"
-  checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
-  languageName: node
-  linkType: hard
-
 "postgres-array@npm:~2.0.0":
   version: 2.0.0
   resolution: "postgres-array@npm:2.0.0"
@@ -26624,6 +26877,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-ms@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "pretty-ms@npm:9.1.0"
+  dependencies:
+    parse-ms: "npm:^4.0.0"
+  checksum: 10c0/fd111aad8800a04dfd654e6016da69bdaa6fc6a4c280f8e727cffd8b5960558e94942f1a94d4aa6e4d179561a0fbb0366a9ebe0ccefbbb0f8ff853b129cdefb9
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^3.0.0":
   version: 3.0.0
   resolution: "proc-log@npm:3.0.0"
@@ -26965,7 +27227,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:18.3.1":
+"react-dom@npm:18.3.1, react-dom@npm:^18.0.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -27192,6 +27454,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^6.0.0":
+  version: 6.26.1
+  resolution: "react-router-dom@npm:6.26.1"
+  dependencies:
+    "@remix-run/router": "npm:1.19.1"
+    react-router: "npm:6.26.1"
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10c0/9d9d8ed54d1c95497c6fa35a6ab46992efeccf1cfc6f0f6089c6c9b040af3eae09568fbb80c690bae08051a955d92d7aa3a0e730f626eb69285114993d31d430
+  languageName: node
+  linkType: hard
+
 "react-router@npm:6.22.3":
   version: 6.22.3
   resolution: "react-router@npm:6.22.3"
@@ -27203,6 +27478,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router@npm:6.26.1":
+  version: 6.26.1
+  resolution: "react-router@npm:6.26.1"
+  dependencies:
+    "@remix-run/router": "npm:1.19.1"
+  peerDependencies:
+    react: ">=16.8"
+  checksum: 10c0/463078e740462b42bb5ba8004448f33fc9e63778f432a4ed55c57b93c5b519e25fb17913ee8435b0fda33c6b9f75df8ef6fcb2c3a4f8db84fb546d202e29aa51
+  languageName: node
+  linkType: hard
+
 "react-select@npm:5.8.0":
   version: 5.8.0
   resolution: "react-select@npm:5.8.0"
@@ -27277,7 +27563,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:18.3.1":
+"react@npm:18.3.1, react@npm:^18.0.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -29481,6 +29767,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strapi-plugin-local-plugin@workspace:examples/getstarted/src/plugins/local-plugin":
+  version: 0.0.0-use.local
+  resolution: "strapi-plugin-local-plugin@workspace:examples/getstarted/src/plugins/local-plugin"
+  languageName: unknown
+  linkType: soft
+
+"strapi-plugin-todo-example@workspace:examples/plugins/todo-example":
+  version: 0.0.0-use.local
+  resolution: "strapi-plugin-todo-example@workspace:examples/plugins/todo-example"
+  dependencies:
+    "@strapi/design-system": "npm:2.0.0-rc.10"
+    "@strapi/icons": "npm:2.0.0-rc.10"
+    "@strapi/sdk-plugin": "npm:^5.2.0"
+    "@strapi/strapi": "workspace:*"
+    eslint: "npm:8.50.0"
+    react: "npm:^18.0.0"
+    react-dom: "npm:^18.0.0"
+    react-router-dom: "npm:^6.0.0"
+    styled-components: "npm:^6.0.0"
+  peerDependencies:
+    "@strapi/strapi": "workspace:*"
+  languageName: unknown
+  linkType: soft
+
 "strapi-plugin-workspace-plugin@workspace:*, strapi-plugin-workspace-plugin@workspace:examples/plugins/workspace-plugin":
   version: 0.0.0-use.local
   resolution: "strapi-plugin-workspace-plugin@workspace:examples/plugins/workspace-plugin"
@@ -29876,6 +30186,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-final-newline@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "strip-final-newline@npm:4.0.0"
+  checksum: 10c0/b0cf2b62d597a1b0e3ebc42b88767f0a0d45601f89fd379a928a1812c8779440c81abba708082c946445af1d6b62d5f16e2a7cf4f30d9d6587b89425fae801ff
+  languageName: node
+  linkType: hard
+
 "strip-indent@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-indent@npm:3.0.0"
@@ -29972,6 +30289,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-components@npm:^6.0.0":
+  version: 6.1.13
+  resolution: "styled-components@npm:6.1.13"
+  dependencies:
+    "@emotion/is-prop-valid": "npm:1.2.2"
+    "@emotion/unitless": "npm:0.8.1"
+    "@types/stylis": "npm:4.2.5"
+    css-to-react-native: "npm:3.2.0"
+    csstype: "npm:3.1.3"
+    postcss: "npm:8.4.38"
+    shallowequal: "npm:1.1.0"
+    stylis: "npm:4.3.2"
+    tslib: "npm:2.6.2"
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: 10c0/dd0379179c6ce9655c97285e9f6475b533d4cc4cad72e8f16824c5454803a9d12126877d8b2837cd5b54520250c55cde97a183e813eed720d2575362d9646663
+  languageName: node
+  linkType: hard
+
 "stylis@npm:4.1.3":
   version: 4.1.3
   resolution: "stylis@npm:4.1.3"
@@ -29986,6 +30323,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 10c0/0410e1404cbeee3388a9e17587875211ce2f014c8379af0d1e24ca55878867c9f1ccc7b0ce9a156ca53f5d6e301391a82b0645522a604674a378b3189a4a1994
+  languageName: node
+  linkType: hard
+
 "superagent@npm:^8.0.5":
   version: 8.0.9
   resolution: "superagent@npm:8.0.9"
@@ -30705,6 +31049,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.6.2, tslib@npm:^2.3.1, tslib@npm:^2.6.0":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.11.1, tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -30719,13 +31070,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.3.1, tslib@npm:^2.6.0":
-  version: 2.6.2
-  resolution: "tslib@npm:2.6.2"
-  checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
-  languageName: node
-  linkType: hard
-
 "tslib@npm:^2.5.0":
   version: 2.6.0
   resolution: "tslib@npm:2.6.0"
@@ -32668,6 +33012,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yoctocolors@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "yoctocolors@npm:2.1.1"
+  checksum: 10c0/85903f7fa96f1c70badee94789fade709f9d83dab2ec92753d612d84fcea6d34c772337a9f8914c6bed2f5fc03a428ac5d893e76fab636da5f1236ab725486d0
+  languageName: node
+  linkType: hard
+
 "yup@npm:0.32.9":
   version: 0.32.9
   resolution: "yup@npm:0.32.9"