Merge pull request #167 from uselagoon/ant-design-support

add ant design support to the ui

package.json

@@ -19,20 +19,22 @@
     "format-check": "yarn prettier --c ."
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.17.0",
     "@ant-design/icons": "^5.1.4",
     "@apollo/react-hooks": "^3.1.5",
     "@emotion/core": "^11.0.0",
     "@emotion/styled": "^11.10.6",
     "@storybook/jest": "^0.1.0",
     "@storybook/preview-api": "^7.0.18",
+    "antd": "^5.9.3",
     "apollo-cache-inmemory": "^1.3.9",
     "apollo-client": "^2.4.5",
     "apollo-link": "^1.2.3",
     "apollo-link-error": "^1.1.1",
     "apollo-link-http": "^1.5.5",
     "apollo-link-ws": "^1.0.10",
-    "bootstrap": "^5.2.3",
     "babel-plugin-styled-components": "^2.0.7",
+    "bootstrap": "^5.2.3",
     "colors": "^1.4.0",
     "core-js": "^3.30.1",
     "crypto-js": "^4.1.1",

src/pages/_document.js

@@ -5,6 +5,7 @@ import getConfig from 'next/config';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import Script from 'next/script';
 
+import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 // styled-components
 import { ServerStyleSheet } from 'styled-components';
 
@@ -14,19 +15,27 @@ class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const sheet = new ServerStyleSheet();
     const originalRenderpage = ctx.renderPage;
+    const cache = createCache();
 
     try {
       ctx.renderPage = () =>
         originalRenderpage({
-          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+          enhanceApp: App => props =>
+            sheet.collectStyles(
+              <StyleProvider cache={cache}>
+                <App {...props} />
+              </StyleProvider>
+            ),
         });
       const initialProps = await Document.getInitialProps(ctx);
+      const antdStyle = extractStyle(cache, true);
       return {
         ...initialProps,
         styles: (
           <>
             {initialProps.styles}
             {sheet.getStyleElement()}
+            <style dangerouslySetInnerHTML={{ __html: antdStyle }} />
           </>
         ),
       };