Merge remote-tracking branch 'origin/feat/adminjs-v7' into beta-v7

.babelrc.json

@@ -10,7 +10,9 @@
     }],
     ["@babel/preset-typescript"]
   ],
-  "plugins": ["babel-plugin-styled-components", "@babel/plugin-syntax-import-assertions"],
+  "plugins": [
+    "@babel/plugin-syntax-import-assertions"
+  ],
   "only": ["src/", "spec/"],
   "ignore": [
     "src/frontend/assets/scripts/app-bundle.development.js",

bin/bundle-globals.js

@@ -52,7 +52,7 @@ const run = async () => {
       axios: 'axios',
       punycode: 'punycode',
       uuid: 'uuid',
-      'styled-components': 'styled',
+      '@adminjs/design-system/styled-components': 'styled',
       'react-dom': 'ReactDOM',
       'prop-types': 'PropTypes',
       'react-redux': 'ReactRedux',

bin/watch-dev.js

@@ -1,6 +1,5 @@
 import * as url from 'url'
 import runtime from '@babel/plugin-transform-runtime'
-import styled from 'babel-plugin-styled-components'
 import importAssertions from '@babel/plugin-syntax-import-assertions'
 
 import bundler from '../src/backend/bundler/bundler.js'
@@ -17,7 +16,7 @@ async function build() {
     minify: env === 'production',
     watch: !once,
     babelConfig: {
-      plugins: [runtime, importAssertions, styled],
+      plugins: [runtime, importAssertions],
       babelHelpers: 'runtime',
       include: [
         'lib/frontend/**',

package.json

@@ -84,7 +84,7 @@
   },
   "homepage": "https://github.com/SoftwareBrothers/adminjs#readme",
   "dependencies": {
-    "@adminjs/design-system": "^4.0.0-beta-v4.6",
+    "@adminjs/design-system": "^4.0.0-beta-v4.7",
     "@babel/core": "^7.21.0",
     "@babel/parser": "^7.21.0",
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
@@ -93,7 +93,6 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@babel/register": "^7.21.0",
-    "@emotion/stylis": "^0.8.5",
     "@hello-pangea/dnd": "^16.2.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
@@ -104,7 +103,6 @@
     "@types/babel-core": "^6.25.7",
     "@types/react": "^18.0.28",
     "axios": "^1.3.4",
-    "babel-plugin-styled-components": "^2.0.7",
     "commander": "^10.0.0",
     "flat": "^5.0.2",
     "i18next": "^22.4.13",
@@ -116,6 +114,7 @@
     "punycode": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
     "react-i18next": "^12.2.0",
     "react-is": "^18.2.0",
     "react-redux": "^8.0.5",
@@ -125,15 +124,13 @@
     "rollup": "^3.15.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "slash": "^5.0.0",
-    "styled-components": "6.0.0-beta.11",
     "uuid": "^9.0.0",
     "xss": "^1.0.14"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",
     "@commitlint/cli": "^17.5.0",
     "@commitlint/config-conventional": "^17.4.4",
-    "@emotion/is-prop-valid": "^1.2.0",
     "@semantic-release/git": "^10.0.1",
     "@testing-library/react": "^14.0.0",
     "@types/chai": "^4.3.4",
@@ -147,6 +144,7 @@
     "@types/sinon-chai": "^3.2.9",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-change": "^2.1.2",
@@ -176,7 +174,6 @@
   },
   "resolutions": {
     "@babel/core": "7.21.0",
-    "styled-components": "6.0.0-beta.11",
     "react-redux": "8.0.5",
     "redux": "4.2.1"
   }

src/adminjs.spec.ts

@@ -69,7 +69,7 @@ describe('AdminJS', function () {
           }],
           '@babel/preset-typescript',
         ],
-        plugins: ['babel-plugin-styled-components', '@babel/plugin-syntax-import-assertions'],
+        plugins: ['@babel/plugin-syntax-import-assertions'],
         only: ['src/', 'spec/'],
         ignore: [
           'src/frontend/assets/scripts/app-bundle.development.js',

src/babel.test.config.json

@@ -13,7 +13,7 @@
     ],
     "@babel/preset-typescript"
   ],
-  "plugins": ["babel-plugin-styled-components", "@babel/plugin-syntax-import-assertions"],
+  "plugins": ["@babel/plugin-syntax-import-assertions"],
   "only": ["src/", "spec/"],
   "ignore": [
     "src/frontend/assets/scripts/app-bundle.development.js",

src/backend/bundler/config.js

@@ -19,17 +19,17 @@ export const external = [
   'react-redux',
   'react-router',
   'react-router-dom',
-  'styled-components',
+  '@adminjs/design-system/styled-components',
   'adminjs',
   '@adminjs/design-system',
-  '@carbon/icons-react',
+  'react-feather',
 ]
 
 export const globals = {
   react: 'React',
   redux: 'Redux',
-  '@carbon/icons-react': 'CarbonIcons',
-  'styled-components': 'styled',
+  'react-feather': 'FeatherIcons',
+  '@adminjs/design-system/styled-components': 'styled',
   'prop-types': 'PropTypes',
   'react-dom': 'ReactDOM',
   'react-redux': 'ReactRedux',

src/frontend/bundle-entry.jsx

@@ -2,7 +2,7 @@ import React, { Suspense } from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
-import { ThemeProvider } from 'styled-components'
+import { ThemeProvider } from '@adminjs/design-system/styled-components'
 
 import ViewHelpers from '../backend/utils/view-helpers/view-helpers.js'
 import { flat } from '../utils/flat/index.js'

src/frontend/components/app/action-header/action-header.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-// @ts-nocheck
 import { Badge, Box, ButtonGroup, cssClass, H2, H3 } from '@adminjs/design-system'
 import React from 'react'
 import { useNavigate } from 'react-router'

src/frontend/components/app/action-header/styled-back-button.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react'
-import { styled } from 'styled-components'
 import { Link as RouterLink } from 'react-router-dom'
 import {
   ButtonCSS,
   ButtonProps,
   Icon,
 } from '@adminjs/design-system'
+import { styled } from '@adminjs/design-system/styled-components'
 import { useSelector } from 'react-redux'
 
 import allowOverride from '../../../hoc/allow-override.js'

src/frontend/components/app/breadcrumbs.tsx

@@ -1,15 +1,15 @@
 import { Box, cssClass, Text } from '@adminjs/design-system'
+import { styled } from '@adminjs/design-system/styled-components'
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { styled } from 'styled-components'
 
 import ViewHelpers from '../../../backend/utils/view-helpers/view-helpers.js'
 import allowOverride from '../../hoc/allow-override.js'
 import { useTranslation } from '../../hooks/use-translation.js'
 import { RecordJSON, ResourceJSON } from '../../interfaces/index.js'
 import { getActionElementCss } from '../../utils/index.js'
 
-export const BreadcrumbLink = styled(Link)`
+export const BreadcrumbLink: any = styled(Link)`
   color: ${({ theme }): string => theme.colors.grey60};
   font-family: ${({ theme }): string => theme.font};
   line-height: ${({ theme }): string => theme.lineHeights.default};
@@ -33,7 +33,7 @@ export const BreadcrumbLink = styled(Link)`
   }
 `
 
-export const BreadcrumbText = styled<any>(Text)`
+export const BreadcrumbText: any = styled<any>(Text)`
   color: ${({ theme }): string => theme.colors.grey100};
   font-family: ${({ theme }): string => theme.font};
   font-weight: ${({ theme }): string => theme.fontWeights.normal.toString()};

src/frontend/components/app/default-dashboard.tsx

@@ -1,7 +1,6 @@
-// @ts-nocheck
 import React from 'react'
-import { styled } from 'styled-components'
 import { Box, Button, H2, H5, Illustration, IllustrationProps, Text } from '@adminjs/design-system'
+import { styled } from '@adminjs/design-system/styled-components'
 
 import { useTranslation } from '../../hooks/index.js'
 

src/frontend/components/app/drawer-portal.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { createPortal } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { Drawer, DEFAULT_DRAWER_WIDTH } from '@adminjs/design-system'
-import { ThemeProvider } from 'styled-components'
+import { ThemeProvider } from '@adminjs/design-system/styled-components'
 
 import { ReduxState, RouterProps } from '../../store/index.js'
 import { setDrawerPreRoute } from '../../store/actions/set-drawer-preroute.js'

src/frontend/components/app/records-table/property-header.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react'
 import { TableCell } from '@adminjs/design-system'
 

src/frontend/components/app/records-table/record-in-list.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React, { useState, useEffect, useCallback } from 'react'
 import { useNavigate } from 'react-router'
 import {

src/frontend/components/app/sidebar/sidebar-branding.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { cssClass, themeGet } from '@adminjs/design-system'
-import { styled } from 'styled-components'
+import { styled } from '@adminjs/design-system/styled-components'
 
 import ViewHelpers from '../../../../backend/utils/view-helpers/view-helpers.js'
 import { BrandingOptions } from '../../../../adminjs-options.interface.js'
@@ -11,7 +11,7 @@ type Props = {
   branding: BrandingOptions;
 }
 
-export const StyledLogo = styled(Link)`
+export const StyledLogo: any = styled(Link)`
   text-align: center;
   display: flex;
   align-content: center;

src/frontend/components/app/sidebar/sidebar.tsx

@@ -1,8 +1,7 @@
-// @ts-nocheck
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { Box, cssClass, themeGet } from '@adminjs/design-system'
-import { styled } from 'styled-components'
+import { styled } from '@adminjs/design-system/styled-components'
 
 import { BrandingOptions } from '../../../../adminjs-options.interface.js'
 import { ResourceJSON, PageJSON } from '../../../interfaces/index.js'

src/frontend/components/app/top-bar.tsx

@@ -1,8 +1,7 @@
-// @ts-nocheck
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { cssClass, Box, Icon, themeGet } from '@adminjs/design-system'
-import { styled } from 'styled-components'
+import { styled } from '@adminjs/design-system/styled-components'
 
 import allowOverride from '../../hoc/allow-override.js'
 import LoggedIn from './logged-in.js'

src/frontend/components/app/version.tsx

@@ -1,7 +1,6 @@
-// @ts-nocheck
 import React from 'react'
 import { cssClass, Text, Box } from '@adminjs/design-system'
-import { styled } from 'styled-components'
+import { styled } from '@adminjs/design-system/styled-components'
 
 import { VersionProps } from '../../../adminjs-options.interface.js'
 import { useTranslation } from '../../hooks/index.js'

src/frontend/components/application.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react/no-children-prop */
 import React, { useEffect, useState } from 'react'
 import { Routes, Route } from 'react-router-dom'
-import { Box, Overlay, Reset } from '@adminjs/design-system'
+import { Box, Overlay } from '@adminjs/design-system'
 import { useLocation } from 'react-router'
-import { createGlobalStyle } from 'styled-components'
 
 import ViewHelpers from '../../backend/utils/view-helpers/view-helpers.js'
 import Sidebar from './app/sidebar/sidebar.js'
@@ -16,19 +15,6 @@ import {
 } from './routes/index.js'
 import useHistoryListen from '../hooks/use-history-listen.js'
 
-const GlobalStyle = createGlobalStyle`
-  html, body, #app {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    color: ${({ theme }) => theme.colors.grey100}
-  }
-  #app {
-    isolation: isolate;
-  }
-`
-
 const h = new ViewHelpers()
 
 const App: React.FC = () => {
@@ -70,36 +56,31 @@ const App: React.FC = () => {
    * on a separate page.
    */
   return (
-    <>
-      <Reset />
-      <GlobalStyle />
-      <Box height="100%" flex data-css="app">
-        {sidebarVisible ? (
-          <Overlay
-            onClick={(): void => toggleSidebar(!sidebarVisible)}
-          />
-        ) : null}
-        <Sidebar isVisible={sidebarVisible} data-css="sidebar" />
-        <Box flex flexGrow={1} flexDirection="column" overflowY="auto" bg="bg" data-css="app-content">
-          <TopBar toggleSidebar={() => toggleSidebar(!sidebarVisible)} />
-          <Box position="absolute" top={0} zIndex={2000} data-css="notice">
-            <Notice />
-          </Box>
-          <Routes>
-            <Route path={`${resourceUrl}/*`} element={<ResourceRoute />} />
-            <Route path={pageUrl} element={<PageRoute />} />
-            <Route path={dashboardUrl} element={<DashboardRoute />} />
-          </Routes>
-          <Routes>
-            <Route path={`${resourceActionUrl}/*`} element={<ResourceActionRoute />} />
-            <Route path={`${bulkActionUrl}/*`} element={<BulkActionRoute />} />
-            <Route path={`${recordActionUrl}/*`} element={<RecordActionRoute />} />
-          </Routes>
+    <Box height="100%" flex data-css="app">
+      {sidebarVisible ? (
+        <Overlay
+          onClick={(): void => toggleSidebar(!sidebarVisible)}
+        />
+      ) : null}
+      <Sidebar isVisible={sidebarVisible} data-css="sidebar" />
+      <Box flex flexGrow={1} flexDirection="column" overflowY="auto" bg="bg" data-css="app-content">
+        <TopBar toggleSidebar={() => toggleSidebar(!sidebarVisible)} />
+        <Box position="absolute" top={0} zIndex={2000} data-css="notice">
+          <Notice />
         </Box>
-        <Modal />
+        <Routes>
+          <Route path={`${resourceUrl}/*`} element={<ResourceRoute />} />
+          <Route path={pageUrl} element={<PageRoute />} />
+          <Route path={dashboardUrl} element={<DashboardRoute />} />
+        </Routes>
+        <Routes>
+          <Route path={`${resourceActionUrl}/*`} element={<ResourceActionRoute />} />
+          <Route path={`${bulkActionUrl}/*`} element={<BulkActionRoute />} />
+          <Route path={`${recordActionUrl}/*`} element={<RecordActionRoute />} />
+        </Routes>
       </Box>
-    </>
-
+      <Modal />
+    </Box>
   )
 }