devtool: added shadows and opacities slices

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Opacity, useStyle } from '@morfeo/react';
+import { Card } from '../../../Card';
+import { useRouter } from '../../../../hooks';
+import { RouteState } from '../../../../contexts';
+import { OpacityCard } from '../OpacityCard';
+import styles from './style.module.css';
+
+export const Detail: React.FC = () => {
+  const { route } = useRouter();
+  const { state = {} as RouteState } = route;
+  const { detailKey } = state;
+  const { opacity } = useStyle({ opacity: detailKey as Opacity });
+
+  return (
+    <div className={styles.container}>
+      <Card className="morfeo-card-primary">
+        <OpacityCard opacity={detailKey as Opacity} />
+      </Card>
+      <h2 className="morfeo-typography-h2">opacity: {opacity}</h2>
+    </div>
+  );
+};

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

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

devtool/src/_shared/components/Slices/Opacities/OpacityCard.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Opacity, useThemeValue } from '@morfeo/react';
+
+type Props = {
+  opacity: Opacity;
+};
+
+export const OpacityCard: React.FC<Props> = ({ opacity }) => {
+  const value = useThemeValue('opacities', opacity);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="96"
+      height="96"
+      fill="none"
+      viewBox="0 0 96 96"
+    >
+      <rect
+        width="66"
+        height="66"
+        x="30"
+        fill="var(--colors-primary-light)"
+        rx="5"
+      ></rect>
+      <rect
+        width="66"
+        height="66"
+        y="30"
+        fill="var(--colors-primary)"
+        opacity={value}
+        rx="5"
+      ></rect>
+    </svg>
+  );
+};

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

@@ -0,0 +1,56 @@
+import React, { useMemo, useCallback } from 'react';
+import { Opacity, 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 { getSortedSliceValues } from '../../../utils';
+import styles from './style.module.css';
+import { OpacityCard } from './OpacityCard';
+
+export { Detail } from './Detail';
+
+type Props = {
+  opacity: Opacity;
+};
+
+const ItemCard: React.FC<Props> = ({ opacity }) => {
+  const { navigate } = useRouter();
+
+  const onClick = useCallback(() => {
+    navigate(RouteName.SLICE, {
+      slice: SliceName.OPACITIES,
+      detailKey: opacity,
+    });
+  }, [opacity, navigate]);
+
+  return (
+    <div className={styles.container} onClick={onClick}>
+      <Card copyText={opacity} className="morfeo-card-primary-clickable">
+        <OpacityCard opacity={opacity} />
+      </Card>
+      <h2 className={clsx('morfeo-typography-h2', styles.name)} title={opacity}>
+        {opacity}
+      </h2>
+    </div>
+  );
+};
+
+export const OpacitiesSlice: React.FC = () => {
+  const opacities = useThemeSlice('opacities');
+  const keys = getSortedSliceValues(opacities);
+
+  const section = useMemo(() => {
+    return keys.map(key => {
+      return (
+        <Item key={`opacities-${key}`}>
+          <ItemCard opacity={key} />
+        </Item>
+      );
+    });
+  }, [keys]);
+
+  return <Grid>{section}</Grid>;
+};

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

@@ -0,0 +1,11 @@
+
+.container {
+  width: 100%;
+}
+
+.name {
+  max-width: 10rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Shadow, useStyle } from '@morfeo/react';
+import { Card } from '../../../Card';
+import { useRouter } from '../../../../hooks';
+import { RouteState } from '../../../../contexts';
+import styles from './style.module.css';
+
+export const Detail: React.FC = () => {
+  const { route } = useRouter();
+  const { state = {} as RouteState } = route;
+  const { detailKey } = state;
+  const { boxShadow } = useStyle({ shadow: detailKey as Shadow });
+
+  return (
+    <div className={styles.container}>
+      <Card className="morfeo-card-primary">
+        <Card
+          className="morfeo-card"
+          style={
+            {
+              shadow: detailKey as Shadow,
+              size: 'var(--sizes-xxl)',
+              corner: 'var(--radii-xxs)',
+              bg: 'var(--colors-primary)',
+            } as any
+          }
+        />
+      </Card>
+      <h2 className="morfeo-typography-h2">box-shadow: {boxShadow}</h2>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,62 @@
+import React, { useMemo, useCallback } from 'react';
+import { Shadow, 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 = {
+  shadow: Shadow;
+};
+
+const ItemCard: React.FC<Props> = ({ shadow }) => {
+  const { navigate } = useRouter();
+
+  const onClick = useCallback(() => {
+    navigate(RouteName.SLICE, {
+      slice: SliceName.SHADOWS,
+      detailKey: shadow,
+    });
+  }, [shadow, navigate]);
+
+  return (
+    <div className={styles.container} onClick={onClick}>
+      <Card copyText={shadow} className="morfeo-card-primary-clickable">
+        <Card
+          style={
+            {
+              shadow,
+              size: 'var(--sizes-xl)',
+              corner: 'var(--radii-xxs)',
+              bg: 'var(--colors-primary)',
+            } as any
+          }
+        />
+      </Card>
+      <h2 className={clsx('morfeo-typography-h2', styles.name)} title={shadow}>
+        {shadow}
+      </h2>
+    </div>
+  );
+};
+
+export const ShadowsSlice: React.FC = () => {
+  const shadows = useThemeSlice('shadows');
+  const keys = Object.keys(shadows) as Shadow[];
+
+  const section = useMemo(() => {
+    return keys.map(key => {
+      return (
+        <Item key={`shadows-${key}`}>
+          <ItemCard shadow={key} />
+        </Item>
+      );
+    });
+  }, [keys]);
+
+  return <Grid>{section}</Grid>;
+};

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

@@ -0,0 +1,11 @@
+
+.container {
+  width: 100%;
+}
+
+.name {
+  max-width: 10rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

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

@@ -7,6 +7,8 @@ import { BordersSlice, Detail as BorderDetail } from './Borders';
 import { GeneralFontsSlice, Detail as FontDetail } from './Fonts';
 import { SizesSlice, Detail as SizeDetail } from './Sizes';
 import { SpacingsSlice, Detail as SpacingDetail } from './Spacings';
+import { ShadowsSlice, Detail as ShadowDetail } from './Shadows';
+import { OpacitiesSlice, Detail as OpacityDetail } from './Opacities';
 
 export type SliceConfig = {
   render: React.FC;
@@ -41,8 +43,8 @@ export const slices: Record<SliceName, SliceConfig> = {
     displayName: 'fonts',
   },
   [SliceName.SHADOWS]: {
-    render: () => <></>,
-    renderDetail: () => <></>,
+    render: () => <ShadowsSlice />,
+    renderDetail: () => <ShadowDetail />,
     displayName: 'shadows',
   },
   [SliceName.BORDERS]: {
@@ -71,8 +73,8 @@ export const slices: Record<SliceName, SliceConfig> = {
     displayName: 'gradients',
   },
   [SliceName.OPACITIES]: {
-    render: () => <></>,
-    renderDetail: () => <></>,
+    render: () => <OpacitiesSlice />,
+    renderDetail: () => <OpacityDetail />,
     displayName: 'opacities',
   },
   [SliceName.FONT_WEIGHTS]: {

devtool/src/_shared/constants/index.ts

@@ -35,9 +35,7 @@ export const THEME_KEYS: ThemeKey[] = [
 ];
 
 export const COMING_SOON_SLICES: ThemeKey[] = [
-  'shadows',
   'zIndices',
-  'opacities',
   'transitions',
   'breakpoints',
   'borderWidths',