feat: gradients slice added and bugfixing

devtool/package.json

@@ -83,7 +83,7 @@
     "react-dom": "^17.0.2"
   },
   "scripts": {
-    "start": "INLINE_RUNTIME_CHUNK=false node scripts/start.js",
+    "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "build:theme": "node_modules/@morfeo/cli/bin/run build --config=./.morfeorc.ts",
     "start:firefox": "node scripts/start.js firefox",

devtool/src/_shared/components/Card/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStyle, Style } from '@morfeo/react';
+import { Style, useStyle } from '@morfeo/react';
 import styles from './style.module.css';
 import clsx from 'clsx';
 import { CopyButton } from '../CopyButton';

devtool/src/_shared/components/CodeSnippets/snippets/index.ts

@@ -43,6 +43,13 @@ const map: Record<ThemeKey, SnippetMapCallback> = {
       property: 'p',
       cssProperty: 'padding',
     }),
+  gradients: (value: string) =>
+    general({
+      slice: 'gradients',
+      value,
+      property: 'gradient',
+      cssProperty: 'background',
+    }),
   opacities: (value: string) =>
     general({ slice: 'opacities', value, property: 'opacity' }),
   fontSizes: (value: string) =>

devtool/src/_shared/components/Grid/style.module.css

@@ -1,6 +1,6 @@
 .section {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: flex-start;
   position: relative;
 }

devtool/src/_shared/components/Slices/Colors/Detail/index.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { Color, useTheme } from '@morfeo/react';
+import React from 'react';
+import { Color, useStyle } from '@morfeo/react';
 import { Card } from '../../../Card';
 import { useRouter } from '../../../../hooks';
 import styles from './style.module.css';
@@ -41,19 +41,15 @@ export const Detail: React.FC = () => {
   const { route } = useRouter();
   const { state } = route;
 
-  const theme = useTheme();
-  const colorSlice = useMemo(() => (theme || {})['colors'] || {}, [theme]);
-
-  const bgColor = useMemo(
-    () =>
-      (state?.detailKey && (colorSlice || {})[state.detailKey as Color]) ||
-      'white',
-    [colorSlice, state?.detailKey],
-  );
+  const cardStyle = useStyle({ bg: state?.detailKey as Color });
+  const bgColor = cardStyle['background']?.toString() || '#fff';
 
   return (
     <div className={styles.container}>
-      <Card className="morfeo-card-primary" style={{ bg: bgColor as Color }} />
+      <Card
+        className="morfeo-card-primary"
+        style={{ bg: state?.detailKey as Color }}
+      />
       <div className={styles.colorsCodesContainer}>
         <h2 className="morfeo-typography-h2">
           RGBA: {bgColor.includes('#') ? hex2rgba(bgColor) : bgColor}

devtool/src/_shared/components/Slices/Components/MorfeoComponent.ts

@@ -15,10 +15,8 @@ export const MorfeoComponent: React.FC<Props> = ({
   children,
   ...props
 }) => {
-  const { tag = 'div', props: componentProps = {} } = component(
-    name,
-    variant,
-  ).get();
+  const { tag = 'div', props: componentProps = {} } =
+    component(name, variant).get() || {};
   const { classes } = getStyles({
     [name]: {
       componentName: name as Component,

devtool/src/_shared/components/Slices/Gradients/Detail/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  Gradient,
+  useStyle,
+  useThemeSlice,
+  useThemeValue,
+} from '@morfeo/react';
+import { getContrast } from 'polished';
+import { Card } from '../../../Card';
+import { useRouter } from '../../../../hooks';
+import styles from './style.module.css';
+import { RouteState } from '../../../../contexts';
+
+export const Detail: React.FC = () => {
+  const { route } = useRouter();
+  const { state = {} as RouteState } = route;
+  const { detailKey } = state;
+  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>
+    </div>
+  );
+};

devtool/src/_shared/components/Slices/Gradients/Detail/style.module.css

@@ -0,0 +1,4 @@
+.container {
+  padding-left: var(--spacings-xs);
+  padding-right: var(--spacings-xs);
+}

devtool/src/_shared/components/Slices/Gradients/index.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo, useCallback } from 'react';
+import { Gradient, useThemeSlice } from '@morfeo/react';
+import clsx from 'clsx';
+import { Card } from '../../Card';
+import { useRouter } from '../../../hooks/useRouter';
+import { RouteName } from '../../../contexts';
+import { SliceName } from '../../../contexts/Routing/types';
+import { Grid, Item } from '../../Grid';
+import styles from './style.module.css';
+export { Detail } from './Detail';
+
+type Props = {
+  gradient: Gradient;
+};
+
+const GradientCard: React.FC<Props> = ({ gradient }) => {
+  const { navigate } = useRouter();
+
+  const onClick = useCallback(() => {
+    navigate(RouteName.SLICE, {
+      slice: SliceName.GRADIENTS,
+      detailKey: gradient,
+    });
+  }, [gradient, navigate]);
+
+  return (
+    <div className={styles.gradientContainer} onClick={onClick}>
+      <Card
+        copyText={gradient}
+        className="morfeo-card-primary-clickable"
+        style={{ gradient }}
+      />
+      <h3
+        className={clsx('morfeo-typography-h2', styles.gradientName)}
+        title={gradient}
+      >
+        {gradient}
+      </h3>
+    </div>
+  );
+};
+
+export const Gradients: React.FC = () => {
+  const gradients = useThemeSlice('gradients');
+
+  const gradientKeys = useMemo(
+    () =>
+      (Object.keys(gradients) || []).sort((first, second) =>
+        first.localeCompare(second),
+      ) as Gradient[],
+    [gradients],
+  );
+
+  const section = useMemo(() => {
+    return gradientKeys.map(key => {
+      return (
+        <Item key={`colors-${key}`}>
+          <GradientCard gradient={key} />
+        </Item>
+      );
+    });
+  }, [gradientKeys]);
+
+  return <Grid>{section}</Grid>;
+};

devtool/src/_shared/components/Slices/Gradients/style.module.css

@@ -0,0 +1,18 @@
+
+.gradientContainer {
+  width: 100%;
+}
+
+.gradientName {
+  max-width: 10rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.gradientSection {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
+  box-sizing: border-box;
+}

devtool/src/_shared/components/Slices/index.tsx

@@ -1,106 +1,113 @@
 import { SliceName } from '../../contexts';
 import { Colors, Detail as ColorDetail } from './Colors';
+import { Gradients, Detail as GradientDetail } from './Gradients';
 import { Components, Detail as ComponentDetail } from './Components';
 
-export const slices = {
+export type SliceConfig = {
+  render: React.FC;
+  displayName: string;
+  renderDetail: React.FC;
+};
+
+export const slices: Record<SliceName, SliceConfig> = {
   [SliceName.COLORS]: {
-    render: <Colors />,
-    renderDetail: <ColorDetail />,
+    render: () => <Colors />,
+    renderDetail: () => <ColorDetail />,
     displayName: 'colors',
   },
   [SliceName.COMPONENTS]: {
-    render: <Components />,
-    renderDetail: <ComponentDetail />,
+    render: () => <Components />,
+    renderDetail: () => <ComponentDetail />,
     displayName: 'components',
   },
   [SliceName.RADII]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'radii',
   },
   [SliceName.SIZES]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'sizes',
   },
   [SliceName.FONTS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'fonts',
   },
   [SliceName.SHADOWS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'shadows',
   },
   [SliceName.BORDERS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'borders',
   },
   [SliceName.SPACINGS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'spacings',
   },
   [SliceName.Z_INDICES]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'zIndices',
   },
   [SliceName.FONT_SIZES]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'fontSizes',
   },
   [SliceName.GRADIENTS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <Gradients />,
+    renderDetail: () => <GradientDetail />,
     displayName: 'gradients',
   },
   [SliceName.OPACITIES]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'opacities',
   },
   [SliceName.FONT_WEIGHTS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'fontWeights',
   },
   [SliceName.LINE_HEIGHTS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'lineHeights',
   },
   [SliceName.BREAKPOINTS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'breakpoints',
   },
   [SliceName.TRANSITIONS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'transitions',
   },
   [SliceName.BORDER_WIDTHS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'borderWidths',
   },
   [SliceName.MEDIA_QUERIES]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'mediaQueries',
   },
   [SliceName.BORDER_STYLES]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'borderStyles',
   },
   [SliceName.LETTER_SPACINGS]: {
-    render: <></>,
-    renderDetail: <></>,
+    render: () => <></>,
+    renderDetail: () => <></>,
     displayName: 'letterSpacings',
   },
 };