From bf8bb46e7c9836e566babce402b4986f8fb37488 Mon Sep 17 00:00:00 2001 From: mlizchap Date: Wed, 11 Mar 2020 23:50:39 -0400 Subject: [PATCH 1/8] style: added color swatch preview to default theme tree in the default theme doc page --- .../default-theme/DefaultTheme.js | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 3df9f41dab55b5..37eb7b8e52a174 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -64,14 +64,45 @@ function useTokenType(type) { } } +const useObjectEntryLabelStyles = makeStyles({ + colorPreview: { + margin: '0 5px 0 5px', + }, +}); + function ObjectEntryLabel({ objectKey, objectValue }) { const type = useType(objectValue); const label = useLabel(objectValue, type); const tokenType = useTokenType(type); + const classes = useObjectEntryLabelStyles(); + + const includeColorSample = + label.includes('#') || + (label.includes('rgba') && !label.includes('rgba(0, 0, 0, ') && !label.includes('rgba(0,0,0')); return ( - {objectKey}: {label} + {objectKey}: + + {includeColorSample && ( + + + + )} + {label} + ); } @@ -89,6 +120,9 @@ const useObjectEntryStyles = makeStyles({ backgroundColor: lighten('#333', 0.08), }, }, + colorBox: { + margin: '0 5px 0 10px', + }, }); function ObjectEntry(props) { From bb8927316faedfac4deb624022b0ef877924bc88 Mon Sep 17 00:00:00 2001 From: mlizchap Date: Wed, 11 Mar 2020 23:56:30 -0400 Subject: [PATCH 2/8] chore: removed unused class --- docs/src/pages/customization/default-theme/DefaultTheme.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 37eb7b8e52a174..87fbc43f235e7b 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -120,9 +120,6 @@ const useObjectEntryStyles = makeStyles({ backgroundColor: lighten('#333', 0.08), }, }, - colorBox: { - margin: '0 5px 0 10px', - }, }); function ObjectEntry(props) { From 537d51963509830a5edd693d9ab0aa0b4e408566 Mon Sep 17 00:00:00 2001 From: mlizchap <40478204+mlizchap@users.noreply.github.com> Date: Thu, 12 Mar 2020 00:10:56 -0400 Subject: [PATCH 3/8] Chore: updated svg stroke to hex code --- docs/src/pages/customization/default-theme/DefaultTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 87fbc43f235e7b..086b5d6ac59df5 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -96,7 +96,7 @@ function ObjectEntryLabel({ objectKey, objectValue }) { width="12" height="12" fill={label.replace(/['"]+/g, '')} - stroke="white" + stroke="#fff" stroke-width="3" /> From 52cc21cfc3cacd2786467c7cc62a8e9e0917c0e8 Mon Sep 17 00:00:00 2001 From: mlizchap <40478204+mlizchap@users.noreply.github.com> Date: Thu, 12 Mar 2020 00:30:15 -0400 Subject: [PATCH 4/8] fix: linting fix stroke-width -> strokeWidth --- docs/src/pages/customization/default-theme/DefaultTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 086b5d6ac59df5..c3ca5274e669c5 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -97,7 +97,7 @@ function ObjectEntryLabel({ objectKey, objectValue }) { height="12" fill={label.replace(/['"]+/g, '')} stroke="#fff" - stroke-width="3" + strokeWidth="3" /> )} From 33a0ed6b7f9e073dea526e3ba9132f4486a1831d Mon Sep 17 00:00:00 2001 From: mlizchap <40478204+mlizchap@users.noreply.github.com> Date: Thu, 12 Mar 2020 21:32:54 -0400 Subject: [PATCH 5/8] fix: fixed parens in conditional statement --- docs/src/pages/customization/default-theme/DefaultTheme.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index c3ca5274e669c5..1c89423a284853 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -77,8 +77,8 @@ function ObjectEntryLabel({ objectKey, objectValue }) { const classes = useObjectEntryLabelStyles(); const includeColorSample = - label.includes('#') || - (label.includes('rgba') && !label.includes('rgba(0, 0, 0, ') && !label.includes('rgba(0,0,0')); + (label.includes('#') || + label.includes('rgba')) && !label.includes('rgba(0, 0, 0, ') && !label.includes('rgba(0,0,0')); return ( From 15e8fb617285647b24af0ab8998c3fcaa5288364 Mon Sep 17 00:00:00 2001 From: mlizchap Date: Thu, 12 Mar 2020 22:19:44 -0400 Subject: [PATCH 6/8] fix: changed parens --- docs/src/pages/customization/default-theme/DefaultTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 1c89423a284853..188a84409f95b3 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -78,7 +78,7 @@ function ObjectEntryLabel({ objectKey, objectValue }) { const includeColorSample = (label.includes('#') || - label.includes('rgba')) && !label.includes('rgba(0, 0, 0, ') && !label.includes('rgba(0,0,0')); + label.includes('rgba')) && !label.includes('rgba(0, 0, 0, ') && !label.includes('rgba(0,0,0'); return ( From 530bb30d9afe25801024bda90fac6d06ee03b55f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 15 Mar 2020 19:34:15 +0100 Subject: [PATCH 7/8] add spacing --- docs/src/pages/customization/default-theme/DefaultTheme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 188a84409f95b3..247ca784a2f90b 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -82,7 +82,7 @@ function ObjectEntryLabel({ objectKey, objectValue }) { return ( - {objectKey}: + {`${objectKey}: `} {includeColorSample && ( Date: Sun, 22 Mar 2020 23:43:23 +0100 Subject: [PATCH 8/8] review --- .../default-theme/DefaultTheme.js | 82 ++++++++++--------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 247ca784a2f90b..69e11452bb7e34 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -14,10 +14,15 @@ import Switch from '@material-ui/core/Switch'; /** * @param {unknown} value */ -function useType(value) { +function getType(value) { if (Array.isArray(value)) { return 'array'; } + + if (/^(#|rgb|rgba|hsl|hsla)/.test(value)) { + return 'color'; + } + if (value === null) { return 'null'; } @@ -28,9 +33,9 @@ function useType(value) { /** * * @param {unknown} value - * @param {ReturnType} type + * @param {ReturnType} type */ -function useLabel(value, type) { +function getLabel(value, type) { switch (type) { case 'array': return `Array(${value.length})`; @@ -54,8 +59,10 @@ function useLabel(value, type) { } } -function useTokenType(type) { +function getTokenType(type) { switch (type) { + case 'color': + return 'string'; case 'object': case 'array': return 'comment'; @@ -64,49 +71,47 @@ function useTokenType(type) { } } -const useObjectEntryLabelStyles = makeStyles({ - colorPreview: { - margin: '0 5px 0 5px', +const useObjectEntryLabelStyles = makeStyles((theme) => ({ + color: { + backgroundColor: '#fff', + display: 'inline-block', + marginBottom: -1, + marginRight: theme.spacing(0.5), + border: '1px solid', + backgroundImage: + 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.2%22%2F%3E%3C%2Fsvg%3E")', }, -}); + colorInner: { + display: 'block', + width: 11, + height: 11, + }, +})); -function ObjectEntryLabel({ objectKey, objectValue }) { - const type = useType(objectValue); - const label = useLabel(objectValue, type); - const tokenType = useTokenType(type); +function ObjectEntryLabel(props) { + const { objectKey, objectValue } = props; + const type = getType(objectValue); + const label = getLabel(objectValue, type); + const tokenType = getTokenType(type); const classes = useObjectEntryLabelStyles(); - const includeColorSample = - (label.includes('#') || - label.includes('rgba')) && !label.includes('rgba(0, 0, 0, ') && !label.includes('rgba(0,0,0'); - return ( {`${objectKey}: `} - - {includeColorSample && ( - - - - )} - {label} - + {type === 'color' ? ( + + + + ) : null} + {label} ); } -ObjectEntryLabel.propTypes = { objectKey: PropTypes.any, objectValue: PropTypes.any }; + +ObjectEntryLabel.propTypes = { + objectKey: PropTypes.any, + objectValue: PropTypes.any, +}; const useObjectEntryStyles = makeStyles({ treeItem: { @@ -124,10 +129,9 @@ const useObjectEntryStyles = makeStyles({ function ObjectEntry(props) { const { nodeId, objectKey, objectValue } = props; - const keyPrefix = nodeId; - let children = null; + if ( (objectValue !== null && typeof objectValue === 'object') || typeof objectValue === 'function'