Design-System v2 questions

Discord Q&A frontend-questions
1

Hi :wave:
I’m pretty new to strapi, so excuse me if this was asked already. I’m trying to get the Grid (and Accordion) component to work, but I ran into some issues: The documentation states I should use the grid like this:

<Grid.Root gap={5}>
      <Grid.Item xs={1} background="primary100">
        <Typography>First</Typography>
      </Grid.Item>
      <Grid.Item xs={1} background="primary100">
        <Typography>Second</Typography>
      </Grid.Item>
      <Grid.Item xs={1} background="primary100">
        <Typography>Third</Typography>
      </Grid.Item>
      <Grid.Item xs={1} background="primary100" color="primary700">
        <Typography>Last</Typography>
      </Grid.Item>
    </Grid.Root>,

But this throws Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.. I then checked the repo and found out that the documentation is already updated to v2, so I upgraded the design-system and styled-components according to the migration guide. But I still cant get it to work. I double checked the imports, deleted the node_modules, reinstalled, checked the github issues, checked the unit tests, but I’m kind of out of ideas. Since nobody had this issue, and the tests are running fine, it implies I’m doing something wrong.

Does anyone have to same issues, or knows how to work with the v2? I would alternatively use v1, but I could not find the v1 documentation.

Any help is very much appreciated

This topic has been created from a Discord post (1259404560804479049) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

First, what are you trying to do? Can you show an example of the grid you’re trying to make?

3

To keep it simple: I have created a Test Plugin in my strapi react starter project and created a TestComponent.tsx

4

To keep it simple: I have created a Test plugin in my react strapi project and a component TestComponent.Then basically just copied the Grid Example from the documentation (@storybook/cli - Storybook)

import React from 'react'
import { Grid, Typography } from '@strapi/design-system'

const TestComponent = () => {
 return (
   <div>
     <Grid.Root gap={5}>
       <Grid.Item xs={1} background="primary100">
         <Typography>First</Typography>
       </Grid.Item>
       <Grid.Item xs={1} background="primary100">
         <Typography>Second</Typography>
       </Grid.Item>
       <Grid.Item xs={1} background="primary100">
         <Typography>Third</Typography>
       </Grid.Item>
       <Grid.Item xs={1} background="primary100" color="primary700">
         <Typography>Last</Typography>
       </Grid.Item>
     </Grid.Root>
   </div>
 )
}

export default TestComponent

  "dependencies": {
    "@strapi/design-system": "2.0.0-rc.7",
    "@strapi/icons": "2.0.0-rc.7",
    "prop-types": "15.8.1",
    "zustand": "4.5.4"
  },
  "devDependencies": {
    "@strapi/typescript-utils": "4.25.2",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@types/react-router-dom": "5.3.3",
    "@types/styled-components": "5.1.34",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "5.3.4",
    "styled-components": "6.1.11",
    "typescript": "5.5.3"
  },
5

The plugin works fine, and apart from the Grid and the Accordion all of the components I have used from the strapi-design-system are working (TextInput, TextArea, Flex, Box, and so on).

6

Best thing to do right now is steal code from Strapi core’s react views - The design system documentation is out of date, they know this. The way I’ve always wrangled the design system for my own plugins is to just borrow from existing views in Strapi and editing them to my needs.

7

Thx Webbist, I’ll do that. I still think I’m missing something, because I checked out the v2 branch and experimented a bit with the tests, perhaps wrong dependencies. Will wait till v2 is released.

8

That’s how it works if you want to extend core plugins pretty much lol

9

Unfortunately, the documentation is outdated a lot. And the types.