(this.parent = el)}
- style={{
- width,
- height,
- position: 'relative',
- backgroundColor: backgroundColor || '#f0f0f0',
- }}
- />,
- parentNode && children(parentNode),
- ];
- }
-}
-
-export function Component({ children }) {
- return children();
-}
diff --git a/packages/loot-design/src/guide/document.js b/packages/loot-design/src/guide/document.js
deleted file mode 100644
index 2c34d0102b..0000000000
--- a/packages/loot-design/src/guide/document.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Text, View, render as renderReactNative } from 'react-native';
-
-import Platform from 'loot-core/src/client/platform';
-import { TestProvider } from 'loot-core/src/mocks/redux';
-
-global.IS_DESIGN_MODE = true;
-window.Actual = {
- IS_FAKE_WEB: true,
-};
-
-const modules = {};
-
-function pathToName(path) {
- const name = path.match('./(.*).usage.js', '')[1];
- return name[0].toUpperCase() + name.slice(1);
-}
-
-function Usage({ name, render }) {
- return (
-
-
-
{name}
- {render()}
-
-
- );
-}
-
-async function installPolyfills() {
- if ('ResizeObserver' in window === false) {
- const module = await import('@juggle/resize-observer');
- window.ResizeObserver = module.ResizeObserver;
- }
-}
-
-export default async function render(rootNode) {
- await installPolyfills();
-
- let filterMatch = window.location.search.match(/f=(.*)/);
- let filter = filterMatch ? filterMatch[1] : '';
-
- const guides = Object.keys(modules)
- .map(path => {
- // Do I need key???
- return {
- path,
- name: pathToName(path),
- key: path,
- };
- })
- .filter(guide => guide.path.toLowerCase().includes(filter.toLowerCase()))
- .sort();
-
- guides.forEach(({ path, name, key }) => {
- const isMobileComponent = path.includes('/mobile');
-
- if (Platform.isReactNativeWeb !== isMobileComponent) {
- // Skip if the component is not for this environment
- return;
- }
-
- const mount = document.createElement('div');
- mount.id = path;
- rootNode.appendChild(mount);
-
- if (Platform.isReactNativeWeb) {
- mount.style.float = 'left';
-
- renderReactNative(
-
-
- {name}
-
- {modules[key].default()}
- ,
- mount,
- );
- } else {
- ReactDOM.render(
-
,
- mount,
- );
- }
- });
-}
-
-// Hot modules
-
-var context = require.context('../components', true, /\.usage.js$/);
-
-context.keys().forEach(function (key) {
- var module = context(key);
- modules[key] = module;
-});
-
-if (module.hot) {
- module.hot.accept(context.id, function () {
- var reloadedContext = require.context('../components', true, /\.usage.js$/);
- var changedModules = reloadedContext
- .keys()
- .map(function (key) {
- return [key, reloadedContext(key)];
- })
- .filter(function (reloadedModule) {
- return modules[reloadedModule[0]] !== reloadedModule[1];
- });
- changedModules.forEach(function (module) {
- modules[module[0]] = module[1];
- reloadUsage(module[0], module[1]);
- });
- });
-}
-
-function reloadUsage(path, module) {
- try {
- const scrollTop = document.documentElement.scrollTop;
- const mount = document.getElementById(path);
- ReactDOM.unmountComponentAtNode(mount);
- ReactDOM.render(
-
,
- mount,
- );
- document.documentElement.scrollTop = scrollTop;
- } catch (e) {
- console.log(e);
- }
-}
diff --git a/packages/loot-design/src/index.js b/packages/loot-design/src/index.js
deleted file mode 100644
index 00d88e3f54..0000000000
--- a/packages/loot-design/src/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { plugins } from 'glamor';
-
-import renderDocument from './guide/document';
-
-plugins.clear();
-
-renderDocument(document.getElementById('root'));