feat(devtool): grid

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

@@ -4,7 +4,7 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  width: 10rem;
+  width: 100%;
   height: 10rem;
 }
 

devtool/src/_shared/components/Grid/Item/index.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from './style.module.css';
+
+export const Item: React.FC = ({ children }) => {
+  return (<div className={styles.item}>{children}</div>)
+}

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

@@ -0,0 +1,34 @@
+.item {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: var(--spacings-xs);
+  min-width: 25%;
+  box-sizing: border-box;
+  position: relative;
+}
+
+@media screen and (min-width: 375px) {
+  .item {
+    min-width: 50%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .item {
+    min-width: 33.3%;
+  }
+}
+
+
+@media screen and (min-width: 1366px) {
+  .item {
+    min-width: 25%;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .item {
+    min-width: 20%;
+  }
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import styles from './style.module.css';
+export { Item } from './Item/index';
+
+export const Grid: React.FC = ({ children }) => {
+  return <div className={styles.section}>{children}</div>
+}

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

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

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

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import { Card } from '../../../Card';
+import { useRouter } from '../../../../hooks/useRouter';
+import { Color, useTheme } from '@morfeo/react';
+import styles from './style.module.css';
+
+export const Detail: React.FC = () => {
+  const { route } = useRouter();
+  const { state } = route;
+
+  const theme = useTheme();
+  const colorSlice = useMemo(() => (theme || {})['colors'] || {}, [theme]);
+  console.log({ state, theme, colorSlice });
+  const bgColor = useMemo(
+    () =>
+      (state?.detailKey && (colorSlice || {})[state.detailKey as Color]) ||
+      'white',
+    [colorSlice, state?.detailKey],
+  );
+
+  return (
+    <div className={styles.container}>
+      <Card className="morfeo-card-primary" style={{ bg: bgColor as Color }} />
+    </div>
+  );
+};

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

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

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

@@ -7,6 +7,8 @@ import styles from './style.module.css';
 import { useRouter } from '../../../hooks/useRouter';
 import { RouteName } from '../../../contexts';
 import { SliceName } from '../../../contexts/Routing/types';
+import { Grid, Item } from '../../Grid';
+export { Detail } from './Detail';
 
 export const Colors: React.FC = () => {
   const theme = useTheme();
@@ -26,45 +28,47 @@ export const Colors: React.FC = () => {
       const contrastRatio = getContrast(slice[key], '#fff');
 
       return (
-        <div
-          key={`colors-${key}`}
-          className={styles.colorContainer}
-          onClick={() =>
-            navigate(RouteName.SLICE, {
-              slice: SliceName.COLORS,
-              detailKey: key,
-            })
-          }
-        >
-          <Card
-            copyText={key}
-            className="morfeo-card-primary"
-            style={{
-              bg: key,
-            }}
+        <Item key={`colors-${key}`} >
+          <div
+            key={`colors-${key}`}
+            className={styles.colorContainer}
+            onClick={() =>
+              navigate(RouteName.SLICE, {
+                slice: SliceName.COLORS,
+                detailKey: key,
+              })
+            }
           >
-            <h2
-              className="morfeo-typography-h2"
+            <Card
+              copyText={key}
+              className="morfeo-card-primary-clickable"
               style={{
-                color:
-                  contrastRatio < 1.5
-                    ? 'var(--colors-gray-darkest)'
-                    : 'var(--colors-gray-lightest)',
+                bg: key,
               }}
             >
-              {slice[key]}
-            </h2>
-          </Card>
-          <h3
-            className={clsx('morfeo-typography-h2', styles.colorName)}
-            title={key}
-          >
-            {key}
-          </h3>
-        </div>
+              <h2
+                className="morfeo-typography-h2"
+                style={{
+                  color:
+                    contrastRatio < 1.95
+                      ? 'var(--colors-gray-darkest)'
+                      : 'var(--colors-gray-lightest)',
+                }}
+              >
+                {slice[key]}
+              </h2>
+            </Card>
+            <h3
+              className={clsx('morfeo-typography-h2', styles.colorName)}
+              title={key}
+            >
+              {key}
+            </h3>
+          </div>
+        </Item>
       );
     });
   }, [navigate, slice, sliceKeys]);
 
-  return <>{section}</>;
+  return <Grid>{section}</Grid>;
 };

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

@@ -1,13 +1,18 @@
+
 .colorContainer {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  padding: var(--spacings-xs);
+  width: 100%;
 }
 
 .colorName {
   max-width: 10rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+}
+
+.colorSection {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
+  box-sizing: border-box;
 }

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

@@ -1,6 +1,5 @@
 import { SliceName } from '../../contexts';
-import { ColorDetail } from './Color';
-import { Colors } from './Colors/index';
+import { Colors, Detail as ColorDetail } from './Colors/index';
 
 export const slices = {
   [SliceName.COLORS]: {

devtool/src/_shared/css/dark-components.css

@@ -8,6 +8,15 @@
   flex-direction: column;
 }
 [data-morfeo-theme="dark"] .morfeo-card-primary {
+  color: var(--colors-text-color);
+  cursor: pointer;
+  display: flex;
+  box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest);
+  align-items: center;
+  border-radius: var(--radii-s);
+  flex-direction: column;
+}
+[data-morfeo-theme="dark"] .morfeo-card-primary-clickable {
   color: var(--colors-text-color);
   cursor: pointer;
   display: flex;
@@ -17,7 +26,7 @@
   border-radius: var(--radii-s);
   flex-direction: column;
 }
-[data-morfeo-theme="dark"] .morfeo-card-primary:hover {
+[data-morfeo-theme="dark"] .morfeo-card-primary-clickable:hover {
   transform: translateY(-5px);
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lighter);
 }

devtool/src/_shared/css/light-components.css

@@ -8,6 +8,15 @@
   flex-direction: column;
 }
 [data-morfeo-theme="light"] .morfeo-card-primary {
+  color: var(--colors-text-color);
+  cursor: pointer;
+  display: flex;
+  box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest);
+  align-items: center;
+  border-radius: var(--radii-s);
+  flex-direction: column;
+}
+[data-morfeo-theme="light"] .morfeo-card-primary-clickable {
   color: var(--colors-text-color);
   cursor: pointer;
   display: flex;
@@ -17,7 +26,7 @@
   border-radius: var(--radii-s);
   flex-direction: column;
 }
-[data-morfeo-theme="light"] .morfeo-card-primary:hover {
+[data-morfeo-theme="light"] .morfeo-card-primary-clickable:hover {
   transform: translateY(-5px);
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lighter);
 }

devtool/src/_shared/styles/components/card.ts

@@ -12,6 +12,11 @@ export const Card: ComponentConfig = {
   },
   variants: {
     primary: {
+      style: {
+        shadow: 'light',
+      },
+    },
+    'primary.clickable': {
       style: {
         shadow: 'light',
         transition: 'fast',
@@ -20,7 +25,7 @@ export const Card: ComponentConfig = {
           transform: 'translateY(-5px)',
         },
       },
-    },
+    }
   },
   meta: {
     tags: ['container', 'ui'],

devtool/src/_shared/template/Page/index.tsx

@@ -22,7 +22,7 @@ export const Page: React.FC<Props> = ({ children, title, breadcrumb }) => {
           </h2>
         </div>
       )}
-      <div className={styles.section}>{children}</div>
+      {children}
     </div>
   );
 };

devtool/src/_shared/template/Page/page.module.css

@@ -12,10 +12,4 @@
 
 .breadcrumb {
   color: var(--colors-gray-light) !important;
-}
-
-.section {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
 }

devtool/src/devtool/pages/Home/index.tsx

@@ -8,6 +8,7 @@ import { SliceName } from '../../../_shared/contexts/Routing/types';
 import { IconName } from '../../../_shared/components/Icon/icons';
 import styles from './style.module.css';
 import clsx from 'clsx';
+import { Grid, Item } from '../../../_shared/components/Grid/index';
 
 export const Home: React.FC = () => {
   const themeSlices = useThemeSlices();
@@ -16,22 +17,28 @@ export const Home: React.FC = () => {
   const renderedSlices = useMemo(
     () =>
       themeSlices.map(slice => (
-        <div key={slice} className={styles.sliceContainer}>
-          <Card
-            className={clsx('morfeo-card-primary', styles.sliceCard)}
-            onClick={() =>
-              navigate(RouteName.SLICE, { slice: slice as SliceName })
-            }
-          >
-            <Icon name={`slice.${slice}` as IconName} />
-          </Card>
-          <h4 className="morfeo-typography-h4 mt-xxs">
-            {capitalCase(noCase(slice))}
-          </h4>
-        </div>
+        <Item>
+          <div key={slice} className={styles.sliceContainer}>
+            <Card
+              className={clsx('morfeo-card-primary-clickable', styles.sliceCard)}
+              onClick={() =>
+                navigate(RouteName.SLICE, { slice: slice as SliceName })
+              }
+            >
+              <Icon name={`slice.${slice}` as IconName} />
+            </Card>
+            <h2 className="morfeo-typography-h2 mt-xxs">
+              {capitalCase(noCase(slice))}
+            </h2>
+          </div>
+        </Item>
       )),
     [navigate, themeSlices],
   );
 
-  return <Page>{renderedSlices}</Page>;
+  return (
+    <Page>
+      <Grid>{renderedSlices}</Grid>
+    </Page>
+  );
 };

devtool/src/devtool/pages/Home/style.module.css

@@ -1,10 +1,7 @@
-.sliceContainer {
-  display: flex;
-  flex-direction: column;
-  margin: var(--spacings-xs);
+.sliceCard {
+  width: 100%;
 }
 
-.sliceCard {
-  width: 180px;
-  height: 180px;
+.sliceContainer {
+  width: 100%;
 }

devtool/src/devtool/pages/Slice/index.tsx

@@ -15,6 +15,7 @@ export const Slice: React.FC = () => {
 
   const renderContent = useMemo(() => {
     if (state?.detailKey) {
+      console.log('renderDetail', slices[state.slice].renderDetail)
       return slices[state.slice].renderDetail || <></>;
     }