feat: added slices and optimizations to dev tool

apps/web-sandbox/src/theme.ts

@@ -50,6 +50,35 @@ export const lightTheme = {
   borderWidths: {
     s: '2px',
   },
+  shadows: {
+    none: {
+      color: 'transparent',
+      offset: { width: 0, height: 0 },
+      opacity: 0,
+      elevation: 0,
+    },
+    soft: {
+      color: 'accent',
+      offset: { width: 0, height: 2 },
+      opacity: 0.2,
+      radius: 4,
+      elevation: 2,
+    },
+    medium: {
+      color: 'black',
+      offset: { width: 0, height: 3 },
+      opacity: 0.3,
+      radius: 4,
+      elevation: 3,
+    },
+    strong: {
+      color: 'black',
+      offset: { width: 0, height: 4 },
+      opacity: 0.4,
+      radius: 4,
+      elevation: 4,
+    },
+  },
   breakpoints: {
     md: '900px',
     lg: '1300px',

packages/dev-tools/src/devtools/builders/colors.js

@@ -1,26 +1,9 @@
-import { theme } from '@morfeo/web';
-import { injectStyle } from './injectStyle';
+import { makeRow } from './makeRow';
 
 export function colors() {
-  const { colors } = theme.get();
-  const colorKeys = Object.keys(colors);
-  const colorSlice = document.getElementById('colors');
-  colorKeys.forEach(key => {
-    const colorBlock = document.createElement('div');
-    colorBlock.classList.add('item', 'column', 'centered');
-    const colorBall = document.createElement('div');
-    colorBall.classList.add('circle');
-    const colorName = document.createElement('span');
-    const colorValue = document.createElement('span');
-
-    injectStyle(colorBall, { bg: key });
-
-    colorName.innerHTML = key;
-    colorValue.innerHTML = theme.getValue('colors', key);
-
-    colorBlock.appendChild(colorName);
-    colorBlock.appendChild(colorBall);
-    colorBlock.appendChild(colorValue);
-    colorSlice.appendChild(colorBlock);
+  makeRow({
+    slice: 'colors',
+    property: 'bg',
+    kind: 'circle',
   });
 }

packages/dev-tools/src/devtools/builders/gradients.js

@@ -1,23 +1,13 @@
-import { theme } from '@morfeo/web';
-import { injectStyle } from './injectStyle';
+import { parsers } from '@morfeo/web';
+import { makeRow } from './makeRow';
 
 export function gradients() {
-  const gradients = theme.getSlice('gradients');
-  const gradientKeys = Object.keys(gradients);
-  const gradientSlice = document.getElementById('gradients');
-  gradientKeys.forEach(key => {
-    const gradientBlock = document.createElement('div');
-    gradientBlock.classList.add('item', 'column', 'centered');
-    const circle = document.createElement('div');
-    circle.classList.add('circle');
-    const gradientName = document.createElement('span');
-
-    injectStyle(circle, { gradient: key });
-
-    gradientName.innerHTML = key;
-
-    gradientBlock.appendChild(gradientName);
-    gradientBlock.appendChild(circle);
-    gradientSlice.appendChild(gradientBlock);
+  makeRow({
+    slice: 'gradients',
+    property: 'gradient',
+    kind: 'circle',
+    getValue(_, value) {
+      return parsers.resolve({ gradient: value })['background'];
+    },
   });
 }

packages/dev-tools/src/devtools/builders/index.js

@@ -1,4 +1,22 @@
+import { radii } from './radii';
+import { colors } from './colors';
+import { gradients } from './gradients';
+import { sizes, spaces } from './sizes';
+import { components } from './components';
+import { shadows } from './shadows';
+
 export * from './sizes';
+export * from './radii';
 export * from './colors';
 export * from './gradients';
 export * from './components';
+
+export const all = [
+  colors,
+  sizes,
+  radii,
+  spaces,
+  shadows,
+  gradients,
+  components,
+];

packages/dev-tools/src/devtools/builders/makeRow.js

@@ -0,0 +1,39 @@
+import { theme } from '@morfeo/web';
+import { injectStyle } from './injectStyle';
+
+export function makeRow({
+  slice,
+  kind = 'square',
+  property,
+  showValue = true,
+  getValue,
+  style = {},
+}) {
+  const themeSlice = theme.getSlice(slice);
+  const sliceKeys = Object.keys(themeSlice);
+  const sliceElement = document.getElementById(slice);
+  sliceKeys.forEach(key => {
+    const block = document.createElement('div');
+    block.classList.add('item', 'column', 'centered');
+    const element = document.createElement('div');
+    element.classList.add(kind);
+    const elementName = document.createElement('span');
+
+    injectStyle(element, { ...style, [property]: key });
+
+    elementName.innerHTML = key;
+
+    block.appendChild(elementName);
+    block.appendChild(element);
+
+    if (showValue) {
+      const elementValue = document.createElement('span');
+      elementValue.innerHTML = getValue
+        ? getValue(slice, key)
+        : theme.getValue(slice, key);
+      block.appendChild(elementValue);
+    }
+
+    sliceElement.appendChild(block);
+  });
+}

packages/dev-tools/src/devtools/builders/radii.js

@@ -0,0 +1,8 @@
+import { makeRow } from './makeRow';
+
+export function radii() {
+  makeRow({
+    slice: 'radii',
+    property: 'borderRadius',
+  });
+}

packages/dev-tools/src/devtools/builders/shadows.js

@@ -0,0 +1,12 @@
+import { parsers } from '@morfeo/web';
+import { makeRow } from './makeRow';
+
+export function shadows() {
+  makeRow({
+    slice: 'shadows',
+    property: 'shadow',
+    getValue(_, value) {
+      return parsers.resolve({ shadow: value })['boxShadow'];
+    },
+  });
+}

packages/dev-tools/src/devtools/builders/sizes.js

@@ -1,37 +1,9 @@
-import { theme } from '@morfeo/web';
-import { injectStyle } from './injectStyle';
-
-function makeRow(themeKey, pageClass) {
-  const values = theme.getSlice(themeKey);
-  const keys = Object.keys(values);
-  const slice = document.getElementById(pageClass);
-  keys.forEach(key => {
-    const block = document.createElement('div');
-    block.classList.add('item', 'column', 'centered');
-    const square = document.createElement('div');
-    square.classList.add('square');
-    const name = document.createElement('span');
-    const value = document.createElement('span');
-
-    injectStyle(square, {
-      bg: '#2c3e50',
-      width: theme.getValue(themeKey, key),
-    });
-
-    name.innerHTML = key;
-    value.innerHTML = theme.getValue(themeKey, key);
-
-    block.appendChild(name);
-    block.appendChild(square);
-    block.appendChild(value);
-    slice.appendChild(block);
-  });
-}
+import { makeRow } from './makeRow';
 
 export function spaces() {
-  makeRow('space', 'spaces');
+  makeRow({ slice: 'space', property: 'width' });
 }
 
 export function sizes() {
-  makeRow('sizes', 'sizes');
+  makeRow({ slice: 'sizes', property: 'width' });
 }

packages/dev-tools/src/devtools/events.js

@@ -0,0 +1,20 @@
+const collapseButtons = document.querySelectorAll('.collapse');
+
+collapseButtons.forEach(button => {
+  button.addEventListener('click', e => {
+    const target = button.getAttribute('data-target');
+
+    const collapsible = document.getElementById(target);
+    if (!collapsible) {
+      return;
+    }
+
+    if (collapsible.classList.contains('collapsed')) {
+      collapsible.classList.remove('collapsed');
+      button.innerHTML = `▲`;
+    } else {
+      collapsible.classList.add('collapsed');
+      button.innerHTML = `▼`;
+    }
+  });
+});

packages/dev-tools/src/devtools/index.js

@@ -1,8 +1,7 @@
 import { theme } from '@morfeo/web';
 import { GET_THEME_ACTION, MORFEO_DEVTOOLS } from '../constants';
-import { colors, components, spaces, sizes, gradients } from './builders';
-
-const builders = [colors, spaces, sizes, gradients, components];
+import { all } from './builders';
+import './events';
 
 function reset() {
   const dynamicContents = document.querySelectorAll('.dynamic');
@@ -12,7 +11,7 @@ function reset() {
 }
 
 function build() {
-  builders.forEach(builder => builder());
+  all.forEach(builder => builder());
 }
 
 theme.subscribe(build);

packages/dev-tools/src/views/index.css

@@ -13,6 +13,7 @@ h1.title {
 
 .row {
   display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
 }
 
@@ -22,6 +23,7 @@ h1.title {
 }
 
 .slice {
+  position: relative;
   color: #2c3e50;
   padding: 16px;
   padding-top: 8px;
@@ -33,19 +35,38 @@ h1.title {
   -moz-box-shadow: 1px 9px 32px 2px rgba(0, 0, 0, 0.24);
 }
 
+button.collapse {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  border: none;
+}
+
+.collapsed {
+  display: none;
+}
+
 .item {
-  flex: 1 1 auto;
+  display: flex;
+  flex-basis: calc(25%);
+  margin-bottom: 10px;
 }
 
 .circle {
+  background-color: #2c3e50;
   width: 50px;
   height: 50px;
   border-radius: 50%;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .square {
+  background-color: #2c3e50;
   width: 50px;
   height: 50px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .centered {

packages/dev-tools/src/views/index.html

@@ -10,22 +10,37 @@ <h1 class="title">@morfeo</h1>
     <div id="content">
       <div class="slice">
         <h2>colors</h2>
+        <button class="collapse" data-target="colors">&#x25B2;</button>
         <div id="colors" class="row dynamic"></div>
       </div>
+      <div class="slice">
+        <h2>gradients</h2>
+        <button class="collapse" data-target="gradients">&#x25B2;</button>
+        <div id="gradients" class="row dynamic"></div>
+      </div>
+      <div class="slice">
+        <h2>shadows</h2>
+        <button class="collapse" data-target="shadows">&#x25B2;</button>
+        <div id="shadows" class="row dynamic"></div>
+      </div>
       <div class="slice">
         <h2>space</h2>
-        <div id="spaces" class="row dynamic"></div>
+        <button class="collapse" data-target="space">&#x25B2;</button>
+        <div id="space" class="row dynamic"></div>
       </div>
       <div class="slice">
         <h2>sizes</h2>
+        <button class="collapse" data-target="sizes">&#x25B2;</button>
         <div id="sizes" class="row dynamic"></div>
       </div>
       <div class="slice">
-        <h2>gradients</h2>
-        <div id="gradients" class="row dynamic"></div>
+        <h2>radii</h2>
+        <button class="collapse" data-target="radii">&#x25B2;</button>
+        <div id="radii" class="row dynamic"></div>
       </div>
       <div class="slice">
         <h2>components</h2>
+        <button class="collapse" data-target="components">&#x25B2;</button>
         <div id="components" class="column dynamic"></div>
       </div>
     </div>