fix: deepscan fixes and layout improvements

morfeojs · Oct 28, 2021 · cf892be · cf892be
1 parent 9abb112
commit cf892be
Show file tree

Hide file tree

Showing 20 changed files with 107 additions and 85 deletions.
diff --git a/devtool/config/webpackDevServer.config.js b/devtool/config/webpackDevServer.config.js
@@ -1,9 +1,6 @@
-const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
 const paths = require('./paths');
 
 const host = process.env.HOST || '0.0.0.0';

diff --git a/devtool/src/_shared/components/DetailLabel/index.tsx b/devtool/src/_shared/components/DetailLabel/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+type Props = {
+  label?: string;
+  value: string;
+};
+
+export const DetailLabel: React.FC<Props> = ({ label = 'Value', value }) => {
+  return (
+    <h5 className="morfeo-typography-h5">
+      <span className="font-weight-bold">{label}: </span>
+      {value}
+    </h5>
+  );
+};
diff --git a/devtool/src/_shared/components/Slices/Borders/BorderCard/BorderCard.tsx b/devtool/src/_shared/components/Slices/Borders/BorderCard/BorderCard.tsx
@@ -1,15 +1,23 @@
-import { useMemo } from 'react';
-import { useStyle, useThemeValue, Border, Color, Size } from '@morfeo/react';
+import React, { useMemo } from 'react';
+import { useStyle, useThemeValue, Border, Color } from '@morfeo/react';
 import { getContrast } from 'polished';
 import { Card } from '../../../Card';
-import { Props as DetailProps } from '../Detail'
+import { Props as DetailProps } from '../Detail';
+import { BorderSlice } from '../index';
+import { DetailLabel } from '../../../DetailLabel';
 
 export type Props = {
   clickable?: boolean;
   detailKey: string;
   showValues?: boolean;
   mainSlice: DetailProps['mainSlice'];
-  filters?: Record<'borderWidths' | 'borderStyles' | 'colors', string>
+  filters?: Record<'borderWidths' | 'borderStyles' | 'colors', string>;
+};
+
+const propertiesMap: Record<BorderSlice, keyof React.CSSProperties> = {
+  borderWidths: 'borderWidth',
+  borderStyles: 'borderStyle',
+  borders: 'border',
 };
 
 export const BorderCard: React.FC<Props> = ({
@@ -21,40 +29,50 @@ export const BorderCard: React.FC<Props> = ({
 }) => {
   const isBorders = mainSlice === 'borders';
   const themeValue = useThemeValue(mainSlice, detailKey as any);
-  const borderColor = useThemeValue('colors', (isBorders ? themeValue.color : filters?.colors || '') as Color);
+  const borderColor = useThemeValue(
+    'colors',
+    (isBorders ? themeValue.color : filters?.colors || '') as Color,
+  );
   const style = useStyle({
-    border: detailKey as Border,
+    [propertiesMap[mainSlice]]: detailKey as Border,
   });
 
   const contrastRatio = useMemo(() => {
     if (!borderColor || borderColor === 'none') {
       return 2;
     }
-    return getContrast(borderColor || '#000000' as string, '#ffffff');
+    return getContrast(borderColor || ('#000000' as string), '#ffffff');
   }, [borderColor]);
 
   const innerCardStyle = useMemo(() => {
     if (mainSlice === 'borders') {
       return {
-        border: detailKey
-      }
+        border: detailKey,
+      };
     }
     if (mainSlice === 'borderWidths') {
       return {
         borderWidth: detailKey,
         borderColor: filters?.colors || borderColor || 'var(--colors-dark)',
-        borderStyle: filters?.borderStyles || 'var(--border-styles-solid)'
-      }
+        borderStyle: filters?.borderStyles || 'var(--border-styles-solid)',
+      };
     }
     if (mainSlice === 'borderStyles') {
       return {
         borderStyle: detailKey,
         borderColor: filters?.colors || borderColor || 'var(--colors-dark)',
-        borderWidth: filters?.borderWidths || 'var(--border-widths-m)'
-      }
+        borderWidth: filters?.borderWidths || 'var(--border-widths-m)',
+      };
     }
-    return {}
-  }, [borderColor, detailKey, filters?.borderStyles, filters?.borderWidths, filters?.colors, mainSlice]) 
+    return {};
+  }, [
+    borderColor,
+    detailKey,
+    filters?.borderStyles,
+    filters?.borderWidths,
+    filters?.colors,
+    mainSlice,
+  ]);
 
   return (
     <>
@@ -73,10 +91,7 @@ export const BorderCard: React.FC<Props> = ({
         />
       </Card>
       {showValues && (
-        <h5 className="morfeo-typography-h5">
-          <span className="font-weight-bold">Value: </span>
-          {style.border}
-        </h5>
+        <DetailLabel value={(style as any)[propertiesMap[mainSlice]]} />
       )}
     </>
   );

diff --git a/devtool/src/_shared/components/Slices/Colors/Detail/index.tsx b/devtool/src/_shared/components/Slices/Colors/Detail/index.tsx
@@ -3,6 +3,7 @@ import { Color, useStyle } from '@morfeo/react';
 import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
 import styles from './style.module.css';
+import { DetailLabel } from '../../../DetailLabel';
 
 function hex2rgba(code: string) {
   let hex = code.replace(/[^0-9a-fA-F]/g, '');
@@ -51,12 +52,14 @@ export const Detail: React.FC = () => {
         style={{ bg: state?.detailKey as Color }}
       />
       <div className={styles.colorsCodesContainer}>
-        <h2 className="morfeo-typography-h2">
-          RGBA: {bgColor.includes('#') ? hex2rgba(bgColor) : bgColor}
-        </h2>
-        <h2 className="morfeo-typography-h2">
-          HEX: {bgColor.includes('#') ? bgColor : rgba2hex(bgColor)}
-        </h2>
+        <DetailLabel
+          label="RGBA"
+          value={bgColor.includes('#') ? hex2rgba(bgColor) : bgColor}
+        />
+        <DetailLabel
+          label="HEX"
+          value={bgColor.includes('#') ? bgColor : rgba2hex(bgColor)}
+        />
       </div>
     </div>
   );

diff --git a/devtool/src/_shared/components/Slices/Colors/index.tsx b/devtool/src/_shared/components/Slices/Colors/index.tsx
@@ -17,7 +17,7 @@ export const Colors: React.FC = () => {
 
   const sliceKeys = useMemo(
     () =>
-      (Object.keys(slice) || []).sort((first, second) =>
+      Object.keys(slice).sort((first, second) =>
         first.localeCompare(second),
       ) as Color[],
     [slice],
@@ -28,7 +28,7 @@ export const Colors: React.FC = () => {
       const contrastRatio = getContrast(slice[key], '#fff');
 
       return (
-        <Item key={`colors-${key}`} >
+        <Item key={`colors-${key}`}>
           <div
             key={`colors-${key}`}
             className={styles.colorContainer}

diff --git a/devtool/src/_shared/components/Slices/Components/index.tsx b/devtool/src/_shared/components/Slices/Components/index.tsx
@@ -10,7 +10,7 @@ export const Components: React.FC = () => {
 
   const sliceKeys = useMemo(
     () =>
-      (Object.keys(slice) || []).sort((first, second) =>
+      Object.keys(slice).sort((first, second) =>
         first.localeCompare(second),
       ) as Color[],
     [slice],

diff --git a/devtool/src/_shared/components/Slices/Fonts/Detail/index.tsx b/devtool/src/_shared/components/Slices/Fonts/Detail/index.tsx
@@ -9,6 +9,7 @@ import styles from './style.module.css';
 import { Input } from '../../../Input';
 import { DropDown } from '../../../DropDown';
 import { t } from '../../../../utils';
+import { DetailLabel } from '../../../DetailLabel';
 
 const fontSlices = [
   'fonts',
@@ -117,10 +118,10 @@ export const Detail: React.FC<Props> = ({ main = 'fonts' }) => {
           {text}
         </p>
       </Card>
-      <h2 className="morfeo-typography-h2 my-xs">
-        {paramCase(propertiesMap[main])}:{' '}
-        {(fontStyle as any)[propertiesMap[main]]}
-      </h2>
+      <DetailLabel
+        label={paramCase(propertiesMap[main])}
+        value={(fontStyle as any)[propertiesMap[main]]}
+      />
     </div>
   );
 };
diff --git a/devtool/src/_shared/components/Slices/Fonts/General.tsx b/devtool/src/_shared/components/Slices/Fonts/General.tsx
@@ -47,7 +47,7 @@ export const GeneralFontsSlice: React.FC<Props> = ({ property }) => {
   const { route } = useRouter();
   const slice = route.state?.slice as ThemeKey;
   const sliceValue = useThemeSlice(slice);
-  const keys = Object.keys(sliceValue) as Font[];
+  const keys = useMemo(() => Object.keys(sliceValue) as Font[], [sliceValue]);
 
   const section = useMemo(() => {
     return keys.map(key => {

diff --git a/devtool/src/_shared/components/Slices/Gradients/Detail/index.tsx b/devtool/src/_shared/components/Slices/Gradients/Detail/index.tsx
@@ -1,15 +1,10 @@
 import React from 'react';
-import {
-  Gradient,
-  useStyle,
-  useThemeSlice,
-  useThemeValue,
-} from '@morfeo/react';
-import { getContrast } from 'polished';
+import { Gradient, useStyle } from '@morfeo/react';
 import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
 import styles from './style.module.css';
 import { RouteState } from '../../../../contexts';
+import { DetailLabel } from '../../../DetailLabel';
 
 export const Detail: React.FC = () => {
   const { route } = useRouter();
@@ -18,33 +13,17 @@ export const Detail: React.FC = () => {
   const gradientStyle = useStyle({
     gradient: detailKey as Gradient,
   });
-  const colorsSlice = useThemeSlice('colors');
-  const { colors } = useThemeValue('gradients', detailKey as Gradient);
-  const averageRatio = colors.reduce((acc, color) => {
-    const mappedColor = colorsSlice?.[color] || '#fff';
-    const contrastRatio = getContrast(mappedColor, '#fff');
-
-    return acc + contrastRatio / colors.length;
-  }, 0);
 
   return (
     <div className={styles.container}>
       <Card
         className="morfeo-card-primary"
         style={{ gradient: detailKey as Gradient }}
-      >
-        <h2
-          className="morfeo-typography-h2"
-          style={{
-            color:
-              averageRatio < 1.95
-                ? 'var(--colors-gray-darkest)'
-                : 'var(--colors-gray-lightest)',
-          }}
-        >
-          {gradientStyle['background']}
-        </h2>
-      </Card>
+      />
+      <DetailLabel
+        label="background"
+        value={gradientStyle['background'] as string}
+      />
     </div>
   );
 };
diff --git a/devtool/src/_shared/components/Slices/Gradients/index.tsx b/devtool/src/_shared/components/Slices/Gradients/index.tsx
@@ -45,7 +45,7 @@ export const Gradients: React.FC = () => {
 
   const gradientKeys = useMemo(
     () =>
-      (Object.keys(gradients) || []).sort((first, second) =>
+      Object.keys(gradients).sort((first, second) =>
         first.localeCompare(second),
       ) as Gradient[],
     [gradients],

diff --git a/devtool/src/_shared/components/Slices/Opacities/Detail/index.tsx b/devtool/src/_shared/components/Slices/Opacities/Detail/index.tsx
@@ -4,6 +4,7 @@ import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
 import { RouteState } from '../../../../contexts';
 import { OpacityCard } from '../OpacityCard';
+import { DetailLabel } from '../../../DetailLabel';
 import styles from './style.module.css';
 
 export const Detail: React.FC = () => {
@@ -17,7 +18,7 @@ export const Detail: React.FC = () => {
       <Card className="morfeo-card-primary">
         <OpacityCard opacity={detailKey as Opacity} />
       </Card>
-      <h2 className="morfeo-typography-h2">opacity: {opacity}</h2>
+      <DetailLabel label="opacity" value={opacity as string} />
     </div>
   );
 };
diff --git a/devtool/src/_shared/components/Slices/Radii/Detail/index.tsx b/devtool/src/_shared/components/Slices/Radii/Detail/index.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import {
-  Radius,
-  useThemeValue,
-} from '@morfeo/react';
+import { Radius, useThemeValue } from '@morfeo/react';
 import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
-import styles from './style.module.css';
 import { RouteState } from '../../../../contexts';
+import { DetailLabel } from '../../../DetailLabel';
+import styles from './style.module.css';
 
 export const Detail: React.FC = () => {
   const { route } = useRouter();
@@ -18,17 +16,23 @@ export const Detail: React.FC = () => {
     <div className={styles.container}>
       <Card
         className="morfeo-card-primary"
-        style={{ corner: detailKey as Radius, bg: 'var(--colors-primary)', size: '200px' } as any}
+        style={
+          {
+            corner: detailKey as Radius,
+            bg: 'var(--colors-primary)',
+          } as any
+        }
       >
         <h2
           className="morfeo-typography-h2"
           style={{
-            color: 'var(--colors-inverted-text-color)'
+            color: 'var(--colors-inverted-text-color)',
           }}
         >
           {cornerValue}
         </h2>
       </Card>
+      <DetailLabel label="border-radius" value={cornerValue as string} />
     </div>
   );
 };
diff --git a/devtool/src/_shared/components/Slices/Shadows/Detail/index.tsx b/devtool/src/_shared/components/Slices/Shadows/Detail/index.tsx
@@ -4,6 +4,7 @@ import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
 import { RouteState } from '../../../../contexts';
 import styles from './style.module.css';
+import { DetailLabel } from '../../../DetailLabel';
 
 export const Detail: React.FC = () => {
   const { route } = useRouter();
@@ -26,7 +27,7 @@ export const Detail: React.FC = () => {
           }
         />
       </Card>
-      <h2 className="morfeo-typography-h2">box-shadow: {boxShadow}</h2>
+      <DetailLabel label="box-shadow" value={boxShadow as string} />
     </div>
   );
 };
diff --git a/devtool/src/_shared/components/Slices/Shadows/index.tsx b/devtool/src/_shared/components/Slices/Shadows/index.tsx
@@ -46,7 +46,7 @@ const ItemCard: React.FC<Props> = ({ shadow }) => {
 
 export const ShadowsSlice: React.FC = () => {
   const shadows = useThemeSlice('shadows');
-  const keys = Object.keys(shadows) as Shadow[];
+  const keys = useMemo(() => Object.keys(shadows) as Shadow[], [shadows]);
 
   const section = useMemo(() => {
     return keys.map(key => {

diff --git a/devtool/src/_shared/components/Slices/Sizes/Detail/index.tsx b/devtool/src/_shared/components/Slices/Sizes/Detail/index.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { Size, useThemeValue } from '@morfeo/react';
 import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
-import styles from './style.module.css';
 import { RouteState } from '../../../../contexts';
+import { DetailLabel } from '../../../DetailLabel';
+import styles from './style.module.css';
 
 export const Detail: React.FC = () => {
   const { route } = useRouter();
@@ -23,7 +24,7 @@ export const Detail: React.FC = () => {
           } as any
         }
       />
-      <h2 className="morfeo-typography-h2">{value}</h2>
+      <DetailLabel label="height" value={value} />
     </div>
   );
 };