Merge branch 'master' into feat/readme

apps/ligo-virgo/webpack.config.js

@@ -151,6 +151,8 @@ module.exports = function (webpackConfig) {
         }
     }
 
+    addEmotionBabelPlugin(config);
+
     config.plugins = [
         ...config.plugins.filter(
             p => !(isProd && p instanceof MiniCssExtractPlugin)
@@ -195,3 +197,59 @@ module.exports = function (webpackConfig) {
 
     return config;
 };
+
+// TODO handle nx issue
+// see https://github.com/nrwl/nx/issues/8870
+// see https://github.com/nrwl/nx/issues/4520#issuecomment-787473383
+const addEmotionBabelPlugin = config => {
+    const babelLoader = config.module.rules.find(
+        rule =>
+            typeof rule !== 'string' &&
+            rule.loader?.toString().includes('babel-loader')
+    );
+    if (!babelLoader) {
+        return;
+    }
+
+    babelLoader.options.plugins = [
+        [
+            require.resolve('@emotion/babel-plugin'),
+            {
+                // See https://github.com/mui/material-ui/issues/27380#issuecomment-928973157
+                // See https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin#importmap
+                importMap: {
+                    '@toeverything/components/ui': {
+                        styled: {
+                            canonicalImport: ['@emotion/styled', 'default'],
+                            styledBaseImport: [
+                                '@toeverything/components/ui',
+                                'styled',
+                            ],
+                        },
+                    },
+                    '@mui/material': {
+                        styled: {
+                            canonicalImport: ['@emotion/styled', 'default'],
+                            styledBaseImport: ['@mui/material', 'styled'],
+                        },
+                    },
+                    '@mui/material/styles': {
+                        styled: {
+                            canonicalImport: ['@emotion/styled', 'default'],
+                            styledBaseImport: [
+                                '@mui/material/styles',
+                                'styled',
+                            ],
+                        },
+                    },
+                },
+                // sourceMap is on by default but source maps are dead code eliminated in production
+                sourceMap: true,
+                autoLabel: 'dev-only',
+                labelFormat: '[filename]-[local]',
+                cssPropOptimization: true,
+            },
+        ],
+        ...(babelLoader.options.plugins ?? []),
+    ];
+};

libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx

@@ -1,14 +1,6 @@
-import { styled } from '@toeverything/components/ui';
-import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
 import type { KanbanCard } from '@toeverything/components/editor-core';
-
-const CardContainer = styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: '#fff',
-    border: '1px solid #E2E7ED',
-    borderRadius: '5px',
-});
+import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
 
 const CardContent = styled('div')({
     margin: '20px',
@@ -20,12 +12,16 @@ const CardActions = styled('div')({
     alignItems: 'center',
     width: '100%',
     height: '29px',
-    background: 'rgba(152, 172, 189, 0.1)',
     borderRadius: '0px 0px 5px 5px',
     padding: '6px 0 6px 19px',
     fontSize: '12px',
     fontWeight: '300',
     color: '#98ACBD',
+    transition: 'all ease-in 0.2s',
+
+    ':hover': {
+        background: '#F5F7F8',
+    },
 });
 
 const PlusIcon = styled('div')({
@@ -37,6 +33,23 @@ const PlusIcon = styled('div')({
     },
 });
 
+const CardContainer = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#fff',
+    border: '1px solid #E2E7ED',
+    borderRadius: '5px',
+
+    [CardActions.toString()]: {
+        opacity: '0',
+    },
+    ':hover': {
+        [CardActions.toString()]: {
+            opacity: '1',
+        },
+    },
+});
+
 export const CardItem = ({
     id,
     block,
@@ -56,7 +69,7 @@ export const CardItem = ({
             </CardContent>
             <CardActions onClick={onAddItem}>
                 <PlusIcon />
-                Add item
+                <span>Add item</span>
             </CardActions>
         </CardContainer>
     );

libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts

@@ -31,7 +31,7 @@ export const KanbanContainer = styled('div')({
     // overscrollBehavior: 'contain',
 
     '& > * + *': {
-        marginLeft: '10px',
+        marginLeft: '20px',
     },
 });