diff --git a/.eslintrc.front.js b/.eslintrc.front.js index 90daf4c7c8..12ef7809f2 100644 --- a/.eslintrc.front.js +++ b/.eslintrc.front.js @@ -41,6 +41,14 @@ module.exports = { 'no-restricted-imports': [ 'error', { + paths: [ + { + name: '@strapi/design-system', + importNames: ['Stack'], + message: + "'Stack' has been deprecated. Please import 'Flex' from '@strapi/design-system' instead.", + }, + ], patterns: [ { group: [ diff --git a/.github/actions/check-pr-status/package.json b/.github/actions/check-pr-status/package.json index ea1917de4a..c42554da64 100644 --- a/.github/actions/check-pr-status/package.json +++ b/.github/actions/check-pr-status/package.json @@ -1,6 +1,6 @@ { "name": "check-pr-status", - "version": "4.7.0", + "version": "4.7.1", "main": "dist/index.js", "license": "MIT", "private": true, diff --git a/docs/docs/how-to-install-packages.md b/docs/docs/how-to-install-packages.md new file mode 100644 index 0000000000..a8881d996a --- /dev/null +++ b/docs/docs/how-to-install-packages.md @@ -0,0 +1,23 @@ +--- +title: How to install packages +slug: /how-to-install-packages +tags: + - lerna + - packages +--- + +# Best practices for installing packages in Strapi + +When working with the Strapi monorepo, it's important to follow best practices for installing packages to avoid potential issues and ensure consistent results. Instead of using the standard **`yarn add`** command, we recommend using **`yarn lerna add --scope @strapi/`** for installing packages. Actually, you may encounter the following error using `yarn add`: + +`An unexpected error occurred: "expected workspace package to exist for \"@typescript-eslint/typescript-estree\'` + +This approach uses Lerna, a tool for managing JavaScript projects with multiple packages, to ensure that the package is installed in the correct location(s) and version across all modules that include it. The **`--scope`** flag specifies the specific module(s) that the package should be installed in, ensuring that it's only installed where it's needed. + +By using this method, Strapi developers can avoid issues with mismatched package versions or unnecessary dependencies in certain modules. This can help to keep the codebase clean and maintainable, and reduce the potential for conflicts or issues in the future. + +Overall, we recommend using **`yarn lerna add`** with the **`--scope`** flag for installing packages in the Strapi mono repo, to ensure consistent and reliable results. + +## Resources + +- [Lerna Docs](https://futurestud.io/tutorials/lerna-install-dependencies-for-a-specific-package) diff --git a/docs/sidebars.js b/docs/sidebars.js index bf6c6ecb96..058de83884 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -167,6 +167,15 @@ const sidebars = { }, items: [], }, + { + type: 'category', + label: 'How to install packages in a module', + link: { + type: 'doc', + id: 'how-to-install-packages', + }, + items: [], + }, ], api: [{ type: 'autogenerated', dirName: 'api' }], community: [{ type: 'autogenerated', dirName: 'community' }], diff --git a/examples/getstarted/package.json b/examples/getstarted/package.json index d0241f6ba2..fe607a134c 100644 --- a/examples/getstarted/package.json +++ b/examples/getstarted/package.json @@ -1,7 +1,7 @@ { "name": "getstarted", "private": true, - "version": "4.7.0", + "version": "4.7.1", "description": "A Strapi application.", "scripts": { "develop": "strapi develop", @@ -12,22 +12,25 @@ "strapi": "strapi" }, "dependencies": { - "@strapi/plugin-color-picker": "4.7.0", - "@strapi/plugin-documentation": "4.7.0", - "@strapi/plugin-graphql": "4.7.0", - "@strapi/plugin-i18n": "4.7.0", - "@strapi/plugin-sentry": "4.7.0", - "@strapi/plugin-users-permissions": "4.7.0", - "@strapi/provider-email-mailgun": "4.7.0", - "@strapi/provider-upload-aws-s3": "4.7.0", - "@strapi/provider-upload-cloudinary": "4.7.0", - "@strapi/strapi": "4.7.0", - "@vscode/sqlite3": "5.0.8", + "@strapi/icons": "1.6.3", + "@strapi/plugin-color-picker": "4.7.1", + "@strapi/plugin-documentation": "4.7.1", + "@strapi/plugin-graphql": "4.7.1", + "@strapi/plugin-i18n": "4.7.1", + "@strapi/plugin-sentry": "4.7.1", + "@strapi/plugin-users-permissions": "4.7.1", + "@strapi/provider-email-mailgun": "4.7.1", + "@strapi/provider-upload-aws-s3": "4.7.1", + "@strapi/provider-upload-cloudinary": "4.7.1", + "@strapi/strapi": "4.7.1", + "@vscode/sqlite3": "5.1.2", "better-sqlite3": "8.0.1", "lodash": "4.17.21", "mysql": "2.18.1", "passport-google-oauth2": "0.2.0", "pg": "8.8.0", + "react": "^17.0.2", + "react-intl": "6.2.8", "sqlite3": "5.1.2" }, "strapi": { diff --git a/examples/kitchensink-ts/package.json b/examples/kitchensink-ts/package.json index 19117c2e89..7adf7ba7de 100644 --- a/examples/kitchensink-ts/package.json +++ b/examples/kitchensink-ts/package.json @@ -1,7 +1,7 @@ { "name": "kitchensink-ts", "private": true, - "version": "4.7.0", + "version": "4.7.1", "description": "A Strapi application", "scripts": { "develop": "strapi develop", @@ -10,9 +10,9 @@ "strapi": "strapi" }, "dependencies": { - "@strapi/plugin-i18n": "4.7.0", - "@strapi/plugin-users-permissions": "4.7.0", - "@strapi/strapi": "4.7.0", + "@strapi/plugin-i18n": "4.7.1", + "@strapi/plugin-users-permissions": "4.7.1", + "@strapi/strapi": "4.7.1", "better-sqlite3": "8.0.1" }, "author": { diff --git a/examples/kitchensink/package.json b/examples/kitchensink/package.json index 35cf524046..b65d8e84ce 100644 --- a/examples/kitchensink/package.json +++ b/examples/kitchensink/package.json @@ -1,7 +1,7 @@ { "name": "kitchensink", "private": true, - "version": "4.7.0", + "version": "4.7.1", "description": "A Strapi application.", "scripts": { "develop": "strapi develop", @@ -12,10 +12,10 @@ "strapi": "strapi" }, "dependencies": { - "@strapi/provider-email-mailgun": "4.7.0", - "@strapi/provider-upload-aws-s3": "4.7.0", - "@strapi/provider-upload-cloudinary": "4.7.0", - "@strapi/strapi": "4.7.0", + "@strapi/provider-email-mailgun": "4.7.1", + "@strapi/provider-upload-aws-s3": "4.7.1", + "@strapi/provider-upload-cloudinary": "4.7.1", + "@strapi/strapi": "4.7.1", "lodash": "4.17.21", "mysql": "2.18.1", "passport-google-oauth2": "0.2.0", diff --git a/lerna.json b/lerna.json index 967e6909e0..a05f0d2a27 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "4.7.0", + "version": "4.7.1", "packages": [ "packages/*", "examples/*" diff --git a/packages/admin-test-utils/package.json b/packages/admin-test-utils/package.json index 07664140fd..3991064a2e 100644 --- a/packages/admin-test-utils/package.json +++ b/packages/admin-test-utils/package.json @@ -1,6 +1,6 @@ { "name": "@strapi/admin-test-utils", - "version": "4.7.0", + "version": "4.7.1", "private": true, "description": "Test utilities for the Strapi administration panel", "license": "MIT", diff --git a/packages/cli/create-strapi-app/package.json b/packages/cli/create-strapi-app/package.json index 0409245324..ff7f439218 100644 --- a/packages/cli/create-strapi-app/package.json +++ b/packages/cli/create-strapi-app/package.json @@ -1,9 +1,9 @@ { "name": "create-strapi-app", - "version": "4.7.0", + "version": "4.7.1", "description": "Generate a new Strapi application.", "dependencies": { - "@strapi/generate-new": "4.7.0", + "@strapi/generate-new": "4.7.1", "commander": "8.3.0", "inquirer": "8.2.5" }, diff --git a/packages/cli/create-strapi-starter/package.json b/packages/cli/create-strapi-starter/package.json index 977426700b..f8f97ac130 100644 --- a/packages/cli/create-strapi-starter/package.json +++ b/packages/cli/create-strapi-starter/package.json @@ -1,6 +1,6 @@ { "name": "create-strapi-starter", - "version": "4.7.0", + "version": "4.7.1", "description": "Generate a new Strapi application.", "keywords": [ "create-strapi-starter", @@ -38,9 +38,9 @@ "test": "echo \"no tests yet\"" }, "dependencies": { - "@strapi/generate-new": "4.7.0", + "@strapi/generate-new": "4.7.1", "chalk": "4.1.1", - "ci-info": "3.5.0", + "ci-info": "3.8.0", "commander": "8.3.0", "execa": "5.1.1", "fs-extra": "10.0.0", diff --git a/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js b/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js index 9565a1496f..3ebcdefa0e 100644 --- a/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js +++ b/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js @@ -6,7 +6,7 @@ import styled, { keyframes } from 'styled-components'; import { pxToRem } from '@strapi/helper-plugin'; import { Clock, Refresh } from '@strapi/icons'; import { Link } from '@strapi/design-system/v2'; -import { Box, Stack, Flex, Typography } from '@strapi/design-system'; +import { Box, Flex, Typography } from '@strapi/design-system'; import { Content, IconBox, Overlay } from './Overlay'; const overlayContainer = document.createElement('div'); @@ -40,8 +40,8 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => { if (isOpen) { return ReactDOM.createPortal( - - + + {formatMessage(title)} @@ -52,7 +52,7 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => { {formatMessage(description)} - + {displayedIcon === 'reload' && ( diff --git a/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js b/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js index b91d5a5f57..36454a9fc8 100644 --- a/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js +++ b/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { Box, Stack } from '@strapi/design-system'; +import { Box, Flex } from '@strapi/design-system'; import { pxToRem } from '@strapi/helper-plugin'; const Overlay = styled(Box)` @@ -21,7 +21,7 @@ const Overlay = styled(Box)` } `; -const Content = styled(Stack)` +const Content = styled(Flex)` position: fixed; top: 0; right: 0; diff --git a/packages/core/admin/admin/src/components/GuidedTour/Homepage/index.js b/packages/core/admin/admin/src/components/GuidedTour/Homepage/index.js index 0836f320a3..ed38c93d6c 100644 --- a/packages/core/admin/admin/src/components/GuidedTour/Homepage/index.js +++ b/packages/core/admin/admin/src/components/GuidedTour/Homepage/index.js @@ -1,7 +1,7 @@ import React from 'react'; import { useGuidedTour, useTracking, LinkButton } from '@strapi/helper-plugin'; import { useIntl } from 'react-intl'; -import { Stack, Flex, Box, Typography, Button } from '@strapi/design-system'; +import { Flex, Box, Typography, Button } from '@strapi/design-system'; import { ArrowRight } from '@strapi/icons'; import StepperHomepage from './components/Stepper'; import layout from '../layout'; @@ -47,7 +47,7 @@ const GuidedTourHomepage = () => { paddingBottom={4} background="neutral0" > - + {formatMessage({ id: 'app.components.GuidedTour.title', @@ -55,7 +55,7 @@ const GuidedTourHomepage = () => { })} - + )} - + diff --git a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js index f6df83070c..8320a5eeea 100644 --- a/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js +++ b/packages/core/admin/admin/src/components/GuidedTour/Modal/tests/index.test.js @@ -48,7 +48,7 @@ describe('', () => { expect(screen.getByText('🧠 Create a first Collection type')).toBeInTheDocument(); expect(document.body).toMatchInlineSnapshot(` - .c16 { + .c15 { font-weight: 600; font-size: 0.6875rem; line-height: 1.45; @@ -56,14 +56,14 @@ describe('', () => { color: #4945ff; } - .c20 { + .c19 { font-size: 0.875rem; line-height: 1.43; font-weight: 500; color: #ffffff; } - .c21 { + .c20 { font-weight: 600; font-size: 2rem; line-height: 1.25; @@ -71,13 +71,13 @@ describe('', () => { color: #32324d; } - .c25 { + .c24 { font-size: 0.875rem; line-height: 1.43; color: #32324d; } - .c27 { + .c26 { font-size: 0.75rem; line-height: 1.33; font-weight: 600; @@ -96,17 +96,17 @@ describe('', () => { width: 41.25rem; } - .c11 { + .c10 { padding-right: 32px; padding-left: 32px; } - .c13 { + .c12 { margin-right: 40px; min-width: 1.875rem; } - .c14 { + .c13 { background: #7b79ff; border-radius: 4px; width: 0.125rem; @@ -114,12 +114,12 @@ describe('', () => { min-height: 1.5rem; } - .c18 { + .c17 { padding-top: 12px; padding-bottom: 12px; } - .c19 { + .c18 { background: #4945ff; padding: 8px; border-radius: 50%; @@ -127,11 +127,11 @@ describe('', () => { height: 1.875rem; } - .c23 { + .c22 { padding-bottom: 24px; } - .c28 { + .c27 { padding-left: 8px; } @@ -165,9 +165,10 @@ describe('', () => { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + gap: 40px; } - .c8 { + .c7 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -185,7 +186,7 @@ describe('', () => { justify-content: flex-end; } - .c12 { + .c11 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -199,7 +200,7 @@ describe('', () => { flex-direction: row; } - .c17 { + .c16 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -213,7 +214,7 @@ describe('', () => { flex-direction: row; } - .c22 { + .c21 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -231,25 +232,22 @@ describe('', () => { justify-content: center; } - .c7 > * { - margin-top: 0; - margin-bottom: 0; + .c23 { + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 16px; } - .c7 > * + * { - margin-top: 40px; - } - - .c24 > * { - margin-top: 0; - margin-bottom: 0; - } - - .c24 > * + * { - margin-top: 16px; - } - - .c9 { + .c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -263,21 +261,21 @@ describe('', () => { outline: none; } - .c9 svg { + .c8 svg { height: 12px; width: 12px; } - .c9 svg > g, - .c9 svg path { + .c8 svg > g, + .c8 svg path { fill: #ffffff; } - .c9[aria-disabled='true'] { + .c8[aria-disabled='true'] { pointer-events: none; } - .c9:after { + .c8:after { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; @@ -292,11 +290,11 @@ describe('', () => { border: 2px solid transparent; } - .c9:focus-visible { + .c8:focus-visible { outline: none; } - .c9:focus-visible:after { + .c8:focus-visible:after { border-radius: 8px; content: ''; position: absolute; @@ -319,7 +317,7 @@ describe('', () => { width: 1px; } - .c26 { + .c25 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -331,7 +329,7 @@ describe('', () => { padding-right: 16px; } - .c26 .c1 { + .c25 .c1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -342,52 +340,52 @@ describe('', () => { align-items: center; } - .c26 .c15 { + .c25 .c14 { color: #ffffff; } - .c26[aria-disabled='true'] { + .c25[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } - .c26[aria-disabled='true'] .c15 { + .c25[aria-disabled='true'] .c14 { color: #666687; } - .c26[aria-disabled='true'] svg > g,.c26[aria-disabled='true'] svg path { + .c25[aria-disabled='true'] svg > g,.c25[aria-disabled='true'] svg path { fill: #666687; } - .c26[aria-disabled='true']:active { + .c25[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } - .c26[aria-disabled='true']:active .c15 { + .c25[aria-disabled='true']:active .c14 { color: #666687; } - .c26[aria-disabled='true']:active svg > g,.c26[aria-disabled='true']:active svg path { + .c25[aria-disabled='true']:active svg > g,.c25[aria-disabled='true']:active svg path { fill: #666687; } - .c26:hover { + .c25:hover { border: 1px solid #7b79ff; background: #7b79ff; } - .c26:active { + .c25:active { border: 1px solid #4945ff; background: #4945ff; } - .c26 svg > g, - .c26 svg path { + .c25 svg > g, + .c25 svg path { fill: #ffffff; } - .c29 { + .c28 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -401,7 +399,7 @@ describe('', () => { background: #ffffff; } - .c29 .c1 { + .c28 .c1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -412,54 +410,54 @@ describe('', () => { align-items: center; } - .c29 .c15 { + .c28 .c14 { color: #ffffff; } - .c29[aria-disabled='true'] { + .c28[aria-disabled='true'] { border: 1px solid #dcdce4; background: #eaeaef; } - .c29[aria-disabled='true'] .c15 { + .c28[aria-disabled='true'] .c14 { color: #666687; } - .c29[aria-disabled='true'] svg > g,.c29[aria-disabled='true'] svg path { + .c28[aria-disabled='true'] svg > g,.c28[aria-disabled='true'] svg path { fill: #666687; } - .c29[aria-disabled='true']:active { + .c28[aria-disabled='true']:active { border: 1px solid #dcdce4; background: #eaeaef; } - .c29[aria-disabled='true']:active .c15 { + .c28[aria-disabled='true']:active .c14 { color: #666687; } - .c29[aria-disabled='true']:active svg > g,.c29[aria-disabled='true']:active svg path { + .c28[aria-disabled='true']:active svg > g,.c28[aria-disabled='true']:active svg path { fill: #666687; } - .c29:hover { + .c28:hover { background-color: #f6f6f9; } - .c29:active { + .c28:active { background-color: #eaeaef; } - .c29 .c15 { + .c28 .c14 { color: #32324d; } - .c29 svg > g, - .c29 svg path { + .c28 svg > g, + .c28 svg path { fill: #32324d; } - .c10 { + .c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -476,26 +474,26 @@ describe('', () => { width: 2rem; } - .c10 svg > g, - .c10 svg path { + .c9 svg > g, + .c9 svg path { fill: #8e8ea9; } - .c10:hover svg > g, - .c10:hover svg path { + .c9:hover svg > g, + .c9:hover svg path { fill: #666687; } - .c10:active svg > g, - .c10:active svg path { + .c9:active svg > g, + .c9:active svg path { fill: #a5a5ba; } - .c10[aria-disabled='true'] { + .c9[aria-disabled='true'] { background-color: #eaeaef; } - .c10[aria-disabled='true'] svg path { + .c9[aria-disabled='true'] svg path { fill: #666687; } @@ -540,15 +538,15 @@ describe('', () => {