Feature/mui v5

.github/workflows/main-lab.yml → .github/workflows/main-lab-icons.yml

@@ -1,4 +1,4 @@
-name: CI - lab
+name: CI - lab&icons
 on:
   push:
     branches:

README.md

@@ -1,6 +1,5 @@
 # DHI | React Components
-[![CI - icons](https://github.com/DHI/react-components/actions/workflows/main-icons.yml/badge.svg)](https://github.com/DHI/react-components/actions/workflows/main-icons.yml)
-[![CI - lab](https://github.com/DHI/react-components/actions/workflows/main-lab.yml/badge.svg)](https://github.com/DHI/react-components/actions/workflows/main-lab.yml)
+[![CI - lab&icons](https://github.com/DHI/react-components/actions/workflows/main-lab-icons.yml/badge.svg)](https://github.com/DHI/react-components/actions/workflows/main-lab-icons.yml)
 ![CI - core](https://github.com/DHI/react-components/workflows/CI/badge.svg)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 

packages/icons/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "2.0.0",
   "license": "MIT",
   "name": "@dhi/icons",
   "author": "DHI",
@@ -27,8 +27,8 @@
     "@types/react-dom": "^17.0.3"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.12.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@mui/material": "~5",
+    "react": "~17 || ~18",
+    "react-dom": "~17 || ~18"
   }
 }

packages/icons/utils/createSvgIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import { SvgIcon } from '@mui/material';
 
 export default function createSvgIcon(path, displayName): typeof SvgIcon {
     const Component = (props, ref) => (
@@ -14,9 +14,7 @@ export default function createSvgIcon(path, displayName): typeof SvgIcon {
       Component.displayName = `${displayName}Icon`;
     }
 
-    Component.muiName = (SvgIcon as any).muiName;
+    Component.muiName = SvgIcon.muiName;
 
-    return React.memo(React.forwardRef(Component));
-}
-
-
+    return React.memo(React.forwardRef(Component)) as any;
+}

packages/react-components-lab/.storybook/main.js

@@ -13,4 +13,7 @@ module.exports = {
     reactDocgen: 'react-docgen-typescript',
     tsconfigPath: "./../tsconfig.json"
   },
+  features: {
+    emotionAlias: false
+  }
 }

packages/react-components-lab/.storybook/preview.js

@@ -39,5 +39,7 @@ export const parameters = {
 }
 
 export const decorators = [(Story, context) => {
-  return <ThemeProvider type={useDarkMode() ? 'dark' : 'light'}><Story /></ThemeProvider>
+  const isDarkMode = useDarkMode()
+
+  return <ThemeProvider mode={isDarkMode ? 'dark' : 'light'}><Story /></ThemeProvider>
 }]

packages/react-components-lab/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.14.3",
+  "version": "2.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "name": "@dhi/react-components-lab",
@@ -19,14 +19,15 @@
   },
   "scripts": {
     "dev": "yarn sb",
-    "start": "../../node_modules/.bin/start-storybook -p 6006",
+    "start": "cd ../icons && yarn build && cd ../react-components-lab && ../../node_modules/.bin/start-storybook -p 6006",
     "build": "../../node_modules/.bin/tsdx build",
     "test": "../../node_modules/.bin/tsdx test --passWithNoTests",
     "lint": "../../node_modules/eslint/bin/eslint.js .",
     "lint:fix": "../../node_modules/eslint/bin/eslint.js . --fix",
     "build-storybook": "cd ../icons && yarn build && cd ../react-components-lab && ../../node_modules/.bin/build-storybook"
   },
   "devDependencies": {
+    "@dhi/icons": "workspace:^",
     "@types/classnames": "^2.2.10",
     "@types/jsonpath": "^0.2.0",
     "@types/lodash": "^4.14.150",
@@ -36,20 +37,20 @@
     "storybook-dark-mode": "^1.1.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@mui/material": "~5",
+    "react": "~17 || ~18",
+    "react-dom": "~17 || ~18"
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0",
-    "@dhi/icons": "workspace:^",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/system": "^4.12.1",
-    "clsx": "^1.1.1",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.3",
+    "@mui/material": "^5.8.3",
+    "@mui/system": "^5.8.3",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",
     "lodash": "^4.17.21",
-    "lodash.assignin": "^4.2.0",
     "prismjs": "^1.24.1"
   }
 }

packages/react-components-lab/src/components/BarLegend/BarLegend.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useState, FC } from 'react';
-import { Box, Typography } from '@material-ui/core';
+import { Box, Typography, useTheme } from '@mui/material';
 import { BarLegendProps } from './types';
-import useStyles from './styles';
+import ImgLegendStyled from './ImgLegend.styled';
 
 const BarLegend: FC<BarLegendProps> = ({ src, length, range, unit = '' }) => {
-  const classes = useStyles();
   const [val, setVals] = useState<number[] | undefined>();
-
+  const theme = useTheme();
   useEffect(() => {
     if (
       length !== undefined &&
@@ -30,13 +29,13 @@ const BarLegend: FC<BarLegendProps> = ({ src, length, range, unit = '' }) => {
   }, [range, length]);
 
   return (
-    <Box style={{ width: '100%' }}>
-      <img src={src} alt="legend-colorbar" className={classes.colorbar} />
+    <Box width={1}>
+      <ImgLegendStyled src={src} alt="legend-colorbar" theme={theme} />
       {range &&
         (typeof range[0] === 'number' && typeof range[1] === 'number' && val ? (
           <Box display="flex" justifyContent="space-between">
             {val.map((v: number) => (
-              <Typography key={`value-${v}`} style={{ fontSize: 10 }}>
+              <Typography key={`value-${v}`} sx={{ fontSize: 10 }}>
                 {`${v} ${unit}`}
               </Typography>
             ))}
@@ -45,10 +44,10 @@ const BarLegend: FC<BarLegendProps> = ({ src, length, range, unit = '' }) => {
           ['number', 'string'].includes(typeof range[0]) &&
           ['number', 'string'].includes(typeof range[1]) && (
             <Box display="flex" justifyContent="space-between">
-              <Typography style={{ fontSize: 10 }}>
+              <Typography sx={{ fontSize: 10 }}>
                 {`${range[0]} ${unit}`}
               </Typography>
-              <Typography style={{ fontSize: 10 }}>
+              <Typography sx={{ fontSize: 10 }}>
                 {`${range[1]} ${unit}`}
               </Typography>
             </Box>

packages/react-components-lab/src/components/BarLegend/ImgLegend.styled.ts

@@ -0,0 +1,9 @@
+import { styled } from '@mui/material/styles';
+
+const ImgLegendStyled = styled('img')({
+  width: '100%',
+  height: 6,
+  borderRadius: 4,
+});
+
+export default ImgLegendStyled;

packages/react-components-lab/src/components/CalendarBox/CalendarBox.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, Typography } from '@material-ui/core';
+import { Box, Typography } from '@mui/material';
 import { CalendarBoxProps } from './types';
 
 const CalendarBox: FC<CalendarBoxProps> = ({ children, title }) => (
@@ -9,7 +9,7 @@ const CalendarBox: FC<CalendarBoxProps> = ({ children, title }) => (
         {title}
       </Typography>
     )}
-    <Box width={1} display="flex" flexWrap="wrap" flexDirection="space-between">
+    <Box width={1} display="flex" flexWrap="wrap">
       {children.map((comp) => comp)}
     </Box>
   </Box>

packages/react-components-lab/src/components/CalendarItem/CalendarItem.styled.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { experimental_sx as sx } from '@mui/system';
+import { CalendarItemProps } from './types';
+
+const options = {
+  shouldForwardProp: (prop) =>
+    prop !== 'disabled' || prop !== 'variant' || prop !== 'active',
+};
+
+const CalendarItemBox = styled(
+  Box,
+  options
+)<Partial<CalendarItemProps>>(({ disabled, variant, active }) => {
+  const getStyle = () => {
+    if (disabled)
+      return {
+        backgroundColor: 'mediumGrey.light',
+        color: 'mediumGrey.dark',
+      };
+    if (variant === 'button' && !disabled)
+      return {
+        backgroundColor: active ? 'secondary.main' : 'mediumGrey.light',
+        color: active ? 'background.paper' : 'primary.main',
+        '&:hover': {
+          backgroundColor: active ? 'secondary.main' : 'mediumGrey.main',
+        },
+      };
+
+    if (variant === 'semi-button' && !disabled)
+      return {
+        backgroundColor: active ? 'secondary.main' : 'mediumGrey.light',
+        color: active ? 'background.paper' : 'primary.main',
+        '&:hover': {
+          backgroundColor: active ? 'secondary.main' : 'mediumGrey.main',
+        },
+      };
+
+    return {};
+  };
+
+  const stableCss = {
+    cursor: disabled ? 'default' : 'pointer',
+    borderRadius: 4,
+    minWidth: 42,
+    margin: '2px',
+    padding: '0px 7px',
+    textAlign: 'center',
+    flexGrow: 1,
+    ...getStyle(),
+  } as const;
+
+  return sx(stableCss);
+});
+
+export default CalendarItemBox;

packages/react-components-lab/src/components/CalendarItem/CalendarItem.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
-import { Box, Typography } from '@material-ui/core';
-import clsx from 'clsx';
-import useStyles from './styles';
+import { Typography } from '@mui/material';
+import CalendarItemBox from './CalendarItem.styled';
 import { CalendarItemProps } from './types';
 
 const CalendarItem: FC<CalendarItemProps> = ({
@@ -10,34 +9,17 @@ const CalendarItem: FC<CalendarItemProps> = ({
   children,
   active = false,
   disabled = false,
-}) => {
-  const classes = useStyles();
-
-  return (
-    <Box
-      className={clsx(
-        disabled && {
-          [classes.button]: true,
-          [classes.disabled]: true,
-        },
-        variant === 'button' &&
-          !disabled && {
-            [classes.button]: true,
-            [classes.active]: active,
-          },
-        variant === 'semi-button' &&
-          !disabled && {
-            [classes.button]: true,
-            [classes.semiActive]: active,
-          }
-      )}
-      onClick={() => !disabled && onClick()}
-    >
-      <Typography variant="body2" style={{ color: 'inherit' }}>
-        {children}
-      </Typography>
-    </Box>
-  );
-};
+}) => (
+  <CalendarItemBox
+    onClick={() => !disabled && onClick()}
+    disabled={disabled}
+    variant={variant}
+    active={active}
+  >
+    <Typography variant="body2" sx={{ color: 'inherit' }}>
+      {children}
+    </Typography>
+  </CalendarItemBox>
+);
 
 export default CalendarItem;

packages/react-components-lab/src/components/Card/BoxDisabled.styled.ts

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+import { experimental_sx as sx } from '@mui/system';
+
+export default styled(Box)(
+  sx({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 100,
+    borderRadius: 4,
+    backgroundColor: 'lightGrey.main',
+    width: '100%',
+    height: '100%',
+    opacity: 0.7,
+  })
+);