feat: get bundled design-system to the head

package.json

@@ -75,7 +75,7 @@
   },
   "homepage": "https://github.com/SoftwareBrothers/admin-bro#readme",
   "dependencies": {
-    "@admin-bro/design-system": "^1.1.2",
+    "@admin-bro/design-system": "^1.2.3",
     "@babel/core": "^7.10.2",
     "@babel/parser": "^7.10.2",
     "@babel/plugin-transform-runtime": "^7.10.1",

src/.npmrc

@@ -0,0 +1 @@
+access=public

src/backend/bundler/config.js

@@ -51,7 +51,7 @@ const globals = {
   'react-router': 'ReactRouter',
   'react-router-dom': 'ReactRouterDOM',
   'admin-bro': 'AdminBro',
-  '@admin-bro/design-system': 'DesignSystem',
+  '@admin-bro/design-system': 'AdminBroDesignSystem',
   'admin-bro/property-types': 'AdminBro.PropertyTypes',
   'admin-bro/types': 'AdminBro.types',
   'admin-bro/style': 'AdminBro.style',

src/backend/router.ts

@@ -71,6 +71,12 @@ const Router: RouterType = {
   }, {
     path: '/frontend/assets/global.bundle.js',
     src: path.join(ASSETS_ROOT, `scripts/global-bundle.${env}.js`),
+  }, {
+    path: '/frontend/assets/design-system.bundle.js',
+    src: path.join(
+      path.parse(require.resolve('@admin-bro/design-system')).dir,
+      `../bundle.${env}.js`,
+    ),
   }, {
     path: '/frontend/assets/logo.svg',
     src: path.join(ASSETS_ROOT, 'images/logo.svg'),

src/frontend/bundle-entry.jsx

@@ -4,7 +4,6 @@ import { BrowserRouter } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
 import { initReactI18next } from 'react-i18next'
 import i18n from 'i18next'
-import * as Components from '@admin-bro/design-system'
 
 import App from './components/application'
 import BasePropertyComponent from './components/property-type'
@@ -48,19 +47,16 @@ const Application = (
 
 // eslint-disable-next-line no-undef
 window.regeneratorRuntime = regeneratorRuntime
+
 export default {
   withNotice,
   Application,
   ViewHelpers,
   UserComponents: {},
   ApiClient,
-  style: Components.theme,
   BasePropertyComponent,
   env,
-  ...Components,
   ...AppComponents,
   ...Hooks,
   types,
-  // TODO: following is a backward compatible - remove this in version 2.0
-  Components: { ...Components, ...AppComponents },
 }

src/frontend/global-entry.js

@@ -4,23 +4,21 @@
 window.global = {}
 
 import React from 'react'
-import * as Redux from 'redux'
+import Redux from 'redux'
 import axios from 'axios'
 import ReactDOM from 'react-dom'
-import * as ReactRedux from 'react-redux'
-import * as ReactRouter from 'react-router'
-import * as ReactRouterDOM from 'react-router-dom'
+import ReactRedux from 'react-redux'
+import ReactRouter from 'react-router'
+import ReactRouterDOM from 'react-router-dom'
 import PropTypes from 'prop-types'
 import * as styled from 'styled-components'
-import * as StyledSystem from 'styled-system'
-import * as Recharts from 'recharts'
+import StyledSystem from 'styled-system'
+import Recharts from 'recharts'
 import flat from 'flat'
 import ReactDatepicker from 'react-datepicker'
 import ReactSelect from 'react-select/lib/Async'
-import * as CarbonIcons from '@carbon/icons-react'
 import i18n from 'i18next'
-import * as ReactI18Next from 'react-i18next'
-import * as DesignSystem from '@admin-bro/design-system'
+import ReactI18Next from 'react-i18next'
 
 window.React = React
 window.ReactDOM = ReactDOM
@@ -35,11 +33,9 @@ window.StyledSystem = StyledSystem
 window.PropTypes = PropTypes
 window.axios = axios
 window.Recharts = Recharts
-window.CarbonIcons = CarbonIcons
 window.ReactSelect = ReactSelect
 window.i18n = i18n
 window.ReactI18Next = ReactI18Next
-window.DesignSystem = DesignSystem
 
 export {
   React,

src/frontend/layout-template.tsx

@@ -70,6 +70,7 @@ const html = (admin: AdminBro, currentAdmin?: CurrentAdmin, location = '/'): str
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" type="text/css">
 
       <script src="${h.assetPath('global.bundle.js')}"></script>
+      <script src="${h.assetPath('design-system.bundle.js')}"></script>
       <script src="${h.assetPath('app.bundle.js')}"></script>
       <script src="${h.assetPath('components.bundle.js')}"></script>
       ${styles.join('\n')}

src/frontend/login-template.tsx

@@ -78,6 +78,7 @@ const html = (admin: AdminBro, { action, errorMessage }: LoginTemplateAttributes
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" type="text/css">
 
       <script src="${h.assetPath('global.bundle.js')}"></script>
+      <script src="${h.assetPath('design-system.bundle.js')}"></script>
     </head>
     <body>
       <div id="app">${loginComponent}</div>

yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@admin-bro/design-system@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@admin-bro/design-system/-/design-system-1.1.2.tgz#787f7b480f3bedae06fe9cb113b4d3396e5bd6f5"
-  integrity sha512-GoRVpFNi2EXi1kR6cGjTr64gAGqSJimQs21hvhFfTCTSEz5xl2qUbgKX9W/VRVq2S50l764fc26ohj8/jjYqjg==
+"@admin-bro/design-system@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@admin-bro/design-system/-/design-system-1.2.3.tgz#edb4ef06695923449de47f077654a2c986590d96"
+  integrity sha512-JDlIQLdvfKfGozwN/GQ1crcBfy7RNUq0b7MU5rbHyRgpZz1q23FJq4vjLzpRXaHopmHpV02wsDrlMoXKrtukeQ==
   dependencies:
     "@carbon/icons-react" "^10.14.0"
     jw-paginate "^1.0.4"