From a53f5e801f2b3a9baca5adc5a45c112de628b086 Mon Sep 17 00:00:00 2001 From: mauroerta Date: Wed, 2 Jun 2021 17:08:21 +0200 Subject: [PATCH] feat: added slices and optimizations to dev tool --- apps/web-sandbox/src/theme.ts | 29 ++++++++++++++ .../dev-tools/src/devtools/builders/colors.js | 27 +++---------- .../src/devtools/builders/gradients.js | 28 +++++-------- .../dev-tools/src/devtools/builders/index.js | 18 +++++++++ .../src/devtools/builders/makeRow.js | 39 +++++++++++++++++++ .../dev-tools/src/devtools/builders/radii.js | 8 ++++ .../src/devtools/builders/shadows.js | 12 ++++++ .../dev-tools/src/devtools/builders/sizes.js | 34 ++-------------- packages/dev-tools/src/devtools/events.js | 20 ++++++++++ packages/dev-tools/src/devtools/index.js | 7 ++-- packages/dev-tools/src/views/index.css | 23 ++++++++++- packages/dev-tools/src/views/index.html | 21 ++++++++-- 12 files changed, 186 insertions(+), 80 deletions(-) create mode 100644 packages/dev-tools/src/devtools/builders/makeRow.js create mode 100644 packages/dev-tools/src/devtools/builders/radii.js create mode 100644 packages/dev-tools/src/devtools/builders/shadows.js create mode 100644 packages/dev-tools/src/devtools/events.js diff --git a/apps/web-sandbox/src/theme.ts b/apps/web-sandbox/src/theme.ts index e501d887..07f713e2 100644 --- a/apps/web-sandbox/src/theme.ts +++ b/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', diff --git a/packages/dev-tools/src/devtools/builders/colors.js b/packages/dev-tools/src/devtools/builders/colors.js index 02214838..98922d06 100644 --- a/packages/dev-tools/src/devtools/builders/colors.js +++ b/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', }); } diff --git a/packages/dev-tools/src/devtools/builders/gradients.js b/packages/dev-tools/src/devtools/builders/gradients.js index 62aa3474..af7136b2 100644 --- a/packages/dev-tools/src/devtools/builders/gradients.js +++ b/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']; + }, }); } diff --git a/packages/dev-tools/src/devtools/builders/index.js b/packages/dev-tools/src/devtools/builders/index.js index a617a4fe..124d602a 100644 --- a/packages/dev-tools/src/devtools/builders/index.js +++ b/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, +]; diff --git a/packages/dev-tools/src/devtools/builders/makeRow.js b/packages/dev-tools/src/devtools/builders/makeRow.js new file mode 100644 index 00000000..00ad969c --- /dev/null +++ b/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); + }); +} diff --git a/packages/dev-tools/src/devtools/builders/radii.js b/packages/dev-tools/src/devtools/builders/radii.js new file mode 100644 index 00000000..0dd3ee6a --- /dev/null +++ b/packages/dev-tools/src/devtools/builders/radii.js @@ -0,0 +1,8 @@ +import { makeRow } from './makeRow'; + +export function radii() { + makeRow({ + slice: 'radii', + property: 'borderRadius', + }); +} diff --git a/packages/dev-tools/src/devtools/builders/shadows.js b/packages/dev-tools/src/devtools/builders/shadows.js new file mode 100644 index 00000000..1f8a4baa --- /dev/null +++ b/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']; + }, + }); +} diff --git a/packages/dev-tools/src/devtools/builders/sizes.js b/packages/dev-tools/src/devtools/builders/sizes.js index 04a3fbde..9d8a6372 100644 --- a/packages/dev-tools/src/devtools/builders/sizes.js +++ b/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' }); } diff --git a/packages/dev-tools/src/devtools/events.js b/packages/dev-tools/src/devtools/events.js new file mode 100644 index 00000000..d8cb5bc8 --- /dev/null +++ b/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 = `▼`; + } + }); +}); diff --git a/packages/dev-tools/src/devtools/index.js b/packages/dev-tools/src/devtools/index.js index b67619fc..219384e8 100644 --- a/packages/dev-tools/src/devtools/index.js +++ b/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); diff --git a/packages/dev-tools/src/views/index.css b/packages/dev-tools/src/views/index.css index 8c55a18a..29ad153c 100644 --- a/packages/dev-tools/src/views/index.css +++ b/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 { diff --git a/packages/dev-tools/src/views/index.html b/packages/dev-tools/src/views/index.html index 2a8603b2..faae4e43 100644 --- a/packages/dev-tools/src/views/index.html +++ b/packages/dev-tools/src/views/index.html @@ -10,22 +10,37 @@

@morfeo

colors

+
+
+

gradients

+ +
+
+
+

shadows

+ +
+

space

-
+ +

sizes

+
-

gradients

-
+

radii

+ +

components

+