diff --git a/packages/sui-studio/src/components/theme-mode/index.js b/packages/sui-studio/src/components/theme-mode/index.js index a29423e27..2f685674c 100644 --- a/packages/sui-studio/src/components/theme-mode/index.js +++ b/packages/sui-studio/src/components/theme-mode/index.js @@ -2,10 +2,21 @@ import PropTypes from 'prop-types' import {forwardRef} from 'react' import {DarkModeSwitch} from 'react-toggle-dark-mode' -const ThemeMode = forwardRef(({className, onChange, mode, ...props}, ref) => { +const COLORS = ['white', 'black'] + +const ThemeMode = forwardRef(({className, onChange, mode, size = 24, design, ...props}, ref) => { + const colors = design === 'inverted' ? {light: COLORS[0], dark: COLORS[1]} : {light: COLORS[1], dark: COLORS[0]} return ( ) }) @@ -13,7 +24,9 @@ const ThemeMode = forwardRef(({className, onChange, mode, ...props}, ref) => { ThemeMode.propTypes = { className: PropTypes.string, onChange: PropTypes.func, - mode: PropTypes.oneOf(['light', 'dark']) + mode: PropTypes.oneOf(['light', 'dark']), + size: PropTypes.number, + design: PropTypes.oneOf(['inverted']) } export default ThemeMode diff --git a/packages/sui-studio/workbench/src/app.js b/packages/sui-studio/workbench/src/app.js index e3de42a59..99866123f 100644 --- a/packages/sui-studio/workbench/src/app.js +++ b/packages/sui-studio/workbench/src/app.js @@ -1,28 +1,13 @@ /* eslint-disable no-console, no-undef, import/no-webpack-loader-syntax */ -import ReactDOM from 'react-dom' +import {render, browserHistory} from 'react-dom' +import {Router, Route, Redirect} from '@s-ui/react-router' import {isFunction} from '../../src/components/demo/utilities.js' import {importGlobals} from '../../src/components/globals.js' -import Raw from './components/Raw/index.js' -import Root from './components/Root/index.js' +import Workbench from './components/Workbench/index.js' import './styles.scss' -const queryStringToJSON = queryString => { - if (queryString.indexOf('?') > -1) { - queryString = queryString.split('?')[1] - } - const pairs = queryString.split('&') - const result = {} - pairs.forEach(function (pair) { - pair = pair.split('=') - result[pair[0]] = decodeURIComponent(pair[1] || '') - }) - return result -} - -const params = queryStringToJSON(window.location.href) - const importAll = requireContext => requireContext.keys().map(requireContext) ;(async () => { @@ -72,18 +57,28 @@ const importAll = requireContext => requireContext.keys().map(requireContext) return acc }, {}) - const {raw} = params - const ComponentToRender = raw ? Raw : Root - await importGlobals() - ReactDOM.render( - + ( + + )} + /> + + + } />, document.getElementById('app') ) diff --git a/packages/sui-studio/workbench/src/components/Header/index.js b/packages/sui-studio/workbench/src/components/Header/index.js index d2c8e6b57..62f6fac90 100644 --- a/packages/sui-studio/workbench/src/components/Header/index.js +++ b/packages/sui-studio/workbench/src/components/Header/index.js @@ -1,8 +1,10 @@ -import {useState} from 'react' +import React, {useState} from 'react' import PropTypes from 'prop-types' -export default function Header({children, componentID, iframeSrc}) { +import ThemeMode from '../../../../src/components/theme-mode/index.js' + +export default function Header({children, componentID, iframeSrc, themeMode, setThemeMode}) { const [show, setShow] = useState(true) if (!show) return null @@ -10,6 +12,14 @@ export default function Header({children, componentID, iframeSrc}) { return (
+ + setThemeMode(checked ? 'dark' : 'light')} + size={16} + design="inverted" + /> + - + - + @@ -56,6 +66,8 @@ export default function Header({children, componentID, iframeSrc}) { Header.propTypes = { children: PropTypes.array, + themeMode: PropTypes.string, + setThemeMode: PropTypes.func, componentID: PropTypes.string, iframeSrc: PropTypes.string } diff --git a/packages/sui-studio/workbench/src/components/Header/index.scss b/packages/sui-studio/workbench/src/components/Header/index.scss index 5f435c15f..32a75afd6 100644 --- a/packages/sui-studio/workbench/src/components/Header/index.scss +++ b/packages/sui-studio/workbench/src/components/Header/index.scss @@ -1,9 +1,15 @@ +@import '../../../../src/components/preview/style'; + .Header { align-items: center; - background: rgba(0, 132, 255, 0.8); + background: color-mix( + in srgb, + color-mix(in srgb, var(--studio-c-on-surface) 60%, var(--studio-c-primary)), + transparent 10% + ); border-radius: 8px; bottom: 16px; - color: #fff; + color: var(--studio-c-surface, #000); display: flex; flex-direction: column; justify-content: center; @@ -20,10 +26,11 @@ display: flex; justify-content: center; padding: 8px 0 0 0; + color: var(--studio-c-surface, #000); } &-link { - color: #fff; + color: inherit; font-size: 12px; padding-left: 8px; text-decoration: none; diff --git a/packages/sui-studio/workbench/src/components/Raw/index.js b/packages/sui-studio/workbench/src/components/Raw/index.js index b7e81c19d..d1031b92e 100644 --- a/packages/sui-studio/workbench/src/components/Raw/index.js +++ b/packages/sui-studio/workbench/src/components/Raw/index.js @@ -1,10 +1,11 @@ /* eslint import/no-webpack-loader-syntax:0 */ -import React, {useEffect, useState} from 'react' +import React, {useEffect, useRef, useState} from 'react' import Component, * as named from 'component' import PropTypes from 'prop-types' import SUIContext from '@s-ui/react-context' +import {useRouter} from '@s-ui/react-router' import {cleanDisplayName, createContextByType, removeDefaultContext} from '../../../../src/components/demo/utilities.js' import Preview from '../../../../src/components/preview/index.js' @@ -23,11 +24,17 @@ export default function Raw({ demo: DemoComponent, themes }) { + const { + location: { + query: {mode: themeMode = 'light'} + } + } = useRouter() + const rawRef = useRef() const [playground, setPlayground] = useState(null) const context = Object.keys(contexts).length && createContextByType(contexts, actualContext) - // check if is a normal component or it's wrapped with a React.memo method + // check if is a normal component, or it's wrapped with a React.memo method const ComponentToRender = Component.type ? Component.type : Component useEffect(() => { @@ -36,7 +43,7 @@ export default function Raw({ }, [componentID]) return ( -
+
diff --git a/packages/sui-studio/workbench/src/components/Raw/index.scss b/packages/sui-studio/workbench/src/components/Raw/index.scss index 418e1986d..32d5b818c 100644 --- a/packages/sui-studio/workbench/src/components/Raw/index.scss +++ b/packages/sui-studio/workbench/src/components/Raw/index.scss @@ -1,9 +1,7 @@ @import '../../../../src/styles/settings'; -body { - background-color: $bgc-main; -} - .Raw { - padding: 16px; + background-color: var(--studio-c-surface); + color: var(--studio-c-on-surface); + padding: 0; } diff --git a/packages/sui-studio/workbench/src/components/Root/index.js b/packages/sui-studio/workbench/src/components/Root/index.js index e2397341b..9bc22e3ba 100644 --- a/packages/sui-studio/workbench/src/components/Root/index.js +++ b/packages/sui-studio/workbench/src/components/Root/index.js @@ -20,16 +20,16 @@ const updateOnChange = (setState, sessionKey) => nextValue => { setState(nextValue) } -export default function Root({componentID, contexts = {}, themes}) { +export default function Root({componentID, contexts = {}, themes, themeMode, setThemeMode}) { const [actualContext, setActualContext] = useState(() => getFromStorage('actualContext', 'default')) const [actualStyle, setActualStyle] = useState(() => getFromStorage('actualStyle', 'default')) const [showTests, setShowTests] = useState(() => getFromStorage('showTests', 'show')) - const iframeSrc = `/?raw=true&actualStyle=${actualStyle}&actualContext=${actualContext}` + const iframeSrc = `/?raw=true&actualStyle=${actualStyle}&actualContext=${actualContext}&mode=${themeMode}` return ( -
-
+
+