Merge branch 'master' into feat/readme

This commit is contained in:
Chi Zhang 2022-08-01 17:08:33 +08:00 committed by GitHub
commit 10bc5b531f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 84 additions and 13 deletions

View File

@ -151,6 +151,8 @@ module.exports = function (webpackConfig) {
} }
} }
addEmotionBabelPlugin(config);
config.plugins = [ config.plugins = [
...config.plugins.filter( ...config.plugins.filter(
p => !(isProd && p instanceof MiniCssExtractPlugin) p => !(isProd && p instanceof MiniCssExtractPlugin)
@ -195,3 +197,59 @@ module.exports = function (webpackConfig) {
return config; 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 ?? []),
];
};

View File

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

View File

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