@react-buddy/ide-toolbox - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0-dev.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# 1.1.0-dev.0 (2022-01-19)
+
+
+### Features
+
+* palette components preview [#1](https://github.com/react-buddy/ide-toolbox/tree/master/packages/react-ide-toolbox/issues/1) ([f0f4804](https://github.com/react-buddy/ide-toolbox/tree/master/packages/react-ide-toolbox/commit/f0f4804a454373cfe3644d9119198e72bbcb6ca8))
+
+
+
+
+
+
 ## [1.0.1-next.0](https://github.com/haulmont/jmix-frontend/tree/master/packages/react-ide-toolbox/compare/@haulmont/react-ide-toolbox@1.0.0...@haulmont/react-ide-toolbox@1.0.1-next.0) (2021-07-20)
@@ -8,0 +20,0 @@

dist/index.d.ts

@@ -0,1 +1,2 @@
+import "./routing/routing-api-init";
 export * from "./previews/dev-support";
@@ -2,0 +3,0 @@ export * from "./previews/previews";

dist/index.esm.js

@@ -13,2 +13,50 @@ 'use strict';
 
+const PALETTE_PATH = '/REACT_BUDDY_PALETTE';
+const URL_CHANGE_EVENT = "urlchange";
+const useRoute = (path, exact) => {
+    const [, setUpdate] = React.useState(false);
+    const update = React.useCallback(() => {
+        setUpdate((reRender) => {
+            return !reRender;
+        });
+    }, []);
+    React.useEffect(() => {
+        window.addEventListener(URL_CHANGE_EVENT, update);
+        window.addEventListener("popstate", update);
+        return () => {
+            window.removeEventListener(URL_CHANGE_EVENT, update);
+            window.removeEventListener("popstate", update);
+        };
+    }, []);
+    return isMatchPath(path, exact);
+};
+function isMatchPath(path, exact = false) {
+    const currentPath = getCurrentPath();
+    const match = new RegExp(`^${encodeURI(path)}`).exec(currentPath);
+    if (match) {
+        const [url] = match;
+        return exact ? currentPath === url : true;
+    }
+    return false;
+}
+function getCurrentPath() {
+    const { hash, pathname } = window.location;
+    return hash ? hash.replace("#", "") : pathname;
+}
+function historyPush(url) {
+    window.history.replaceState({}, "", url);
+    dispatchUrlChangeEvent(url);
+}
+function dispatchUrlChangeEvent(url) {
+    const urlChangeEvent = new CustomEvent(URL_CHANGE_EVENT, {
+        bubbles: true,
+        detail: url
+    });
+    window.dispatchEvent(urlChangeEvent);
+}
+
+if (DEV_MODE) {
+    window.reactBuddyHistoryPush = historyPush;
+}
+
 const withInitialHook = (useInitialHook) => {
@@ -68,4 +116,4 @@ const DevBootstrapWrapped = ({ children }) => {
 
-var css_248z$7 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
+styleInject(css_248z$8);
 
@@ -133,4 +181,4 @@ const TableHeader = () => {
 
-var css_248z$6 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
+styleInject(css_248z$7);
 
@@ -154,4 +202,4 @@ const Radio = (_a) => {
 
-var css_248z$5 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
+styleInject(css_248z$6);
 
@@ -195,4 +243,4 @@ const JsonEditor = ({ className, propName, propValue, propUpdate, }) => {
 
-var css_248z$4 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item, .table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item, .table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
+styleInject(css_248z$5);
 
@@ -205,4 +253,4 @@ const TableItem = ({ propName, propValue, onPropChange, controlType, data }) => {
 
-var css_248z$3 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
+styleInject(css_248z$4);
 
@@ -299,4 +347,4 @@ const TableItems = ({ toolsPropsToEdit }) => {
 
-var css_248z$2 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
+styleInject(css_248z$3);
 
@@ -309,4 +357,4 @@ const PropsEditTable = ({ toolsPropsToEdit }) => {
 
-var css_248z$1 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
+styleInject(css_248z$2);
 
@@ -326,8 +374,10 @@ const ToolsPanel = ({ toolsPropsToEdit }) => {
 
-var css_248z = ".previews-main {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-content {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-tools-panel {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
-styleInject(css_248z);
+var css_248z$1 = ".previews-module_previewsMain__31L3F {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-module_previewsContent__1aMUf {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-module_previewsToolsPanel__30jjI {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
+var styles$1 = {"previewsMain":"previews-module_previewsMain__31L3F","previewsContent":"previews-module_previewsContent__1aMUf","previewsToolsPanel":"previews-module_previewsToolsPanel__30jjI"};
+styleInject(css_248z$1);
 
-const Previews = ({ children }) => {
+const Previews = ({ children, palette = null }) => {
     const [toolsPropsToEdit, setToolsPropsToEdit] = React.useState(null);
     const [toolsPanelEnabled, enableToolsPanel] = React.useState(window.__PROPERTIES_EDIT_PANEL_ENABLED__);
+    const isPalettePath = useRoute(PALETTE_PATH);
     const childrenWithSetProps = React.useMemo(() => {
@@ -350,5 +400,8 @@ return children
     }, []);
-    return (React__default['default'].createElement("div", { className: "previews-main" },
-        React__default['default'].createElement("div", { className: "previews-content" }, childrenWithSetProps),
-        toolsPanelEnabled && (React__default['default'].createElement("div", { className: "previews-tools-panel" },
+    if (isPalettePath) {
+        return palette;
+    }
+    return (React__default['default'].createElement("div", { className: styles$1.previewsMain },
+        React__default['default'].createElement("div", { className: styles$1.previewsContent }, childrenWithSetProps),
+        toolsPanelEnabled && (React__default['default'].createElement("div", { className: styles$1.previewsToolsPanel },
             React__default['default'].createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
@@ -358,17 +411,6 @@ };
 const RoutePreview = ({ children, path, exact, setPropsToEdit }) => {
-    const [, setUpdate] = React.useState(false);
     const [modfiedProps, setModifiedProps] = React.useState(null);
-    const update = React.useCallback(() => {
-        setUpdate((reRender) => {
-            return !reRender;
-        });
-    }, []);
+    const isMatchPath = useRoute(path, exact);
     React.useEffect(() => {
-        window.addEventListener('popstate', update);
-        return () => {
-            window.removeEventListener('popstate', update);
-        };
-    }, []);
-    React.useEffect(() => {
-        if (isMatchPath(path, exact)) {
+        if (isMatchPath) {
             const currentProps = modfiedProps !== null && modfiedProps !== void 0 ? modfiedProps : children.props;
@@ -382,23 +424,10 @@ const propsToEdit = {
         return () => {
-            isMatchPath(path, exact) ? null : setModifiedProps(null);
+            isMatchPath ? null : setModifiedProps(null);
         };
-    });
+    }, [isMatchPath]);
     const childrenWithUpdatedProps = modfiedProps
         ? React__default['default'].cloneElement(children, Object.assign({}, modfiedProps))
         : children;
-    return isMatchPath(path, exact) ? React__default['default'].createElement(React__default['default'].Fragment, null, childrenWithUpdatedProps) : null;
+    return isMatchPath ? React__default['default'].createElement(React__default['default'].Fragment, null, childrenWithUpdatedProps) : null;
 };
-function isMatchPath(path, exact = false) {
-    const currentPath = getCurrentPath();
-    const match = new RegExp(`^${path}`).exec(currentPath);
-    if (match) {
-        const [url] = match;
-        return exact ? currentPath === url : true;
-    }
-    return false;
-}
-function getCurrentPath() {
-    const { hash, pathname } = window.location;
-    return hash ? hash.replace("#", "") : pathname;
-}
 
@@ -412,14 +441,48 @@ const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo }) => {
 
-const Palette = ({ children }) => {
-    return (React__default['default'].createElement(React.Fragment, null, children));
+const DEFAULT_VARIANT_NAME = "DEFAULT_VARIANT";
+const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children }) => {
+    const paletteItemPath = React.useMemo(() => {
+        return getPaletteItemPath([categoryName, componentName, variantName]);
+    }, [categoryName, componentName, variantName]);
+    const isPathMatch = useRoute(paletteItemPath, true);
+    return isPathMatch
+        ? React__default['default'].createElement(React__default['default'].Fragment, null, children)
+        : null;
 };
-const Component = ({ children }) => {
-    return (React__default['default'].createElement(React.Fragment, null, children));
+function getPaletteItemPath(names) {
+    return PALETTE_PATH + "/" + names.filter(name => name != null).join("/");
+}
+
+var css_248z = ".palette-module_palette__3nMCV {\n  display: flex;\n  width: 100vw;\n  height: 100vh;\n  justify-content: center;\n  align-items: center;\n}\n\n.palette-module_bodyPaletteStyles__3w-dB {\n  padding: 0;\n  margin: 0;\n}";
+var styles = {"palette":"palette-module_palette__3nMCV","bodyPaletteStyles":"palette-module_bodyPaletteStyles__3w-dB"};
+styleInject(css_248z);
+
+const Category = ({ children, name }) => {
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedCategoryChildren(children, name)));
 };
-const Category = ({ children }) => {
-    return (React__default['default'].createElement(React.Fragment, null, children));
+const Component = ({ children, categoryName, name }) => {
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedComponentChildren(children, name, categoryName)));
 };
-const Variant = ({ children }) => {
-    return (React__default['default'].createElement(React.Fragment, null, children));
+const Variant = ({ children, categoryName, componentName, name }) => {
+    return (React__default['default'].createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name }, children));
 };
+const Palette = ({ children }) => {
+    React.useLayoutEffect(() => {
+        document.body.classList.add(styles.bodyPaletteStyles);
+        return () => {
+            document.body.classList.remove(styles.bodyPaletteStyles);
+        };
+    }, []);
+    return (React__default['default'].createElement("div", { className: styles.palette }, children));
+};
+function getTransformedCategoryChildren(children, categoryName) {
+    return React__default['default'].Children.map(children, (child) => {
+        return React__default['default'].cloneElement(child, { categoryName });
+    });
+}
+function getTransformedComponentChildren(children, componentName, categoryName) {
+    return React__default['default'].Children.map(children, (child) => {
+        return React__default['default'].cloneElement(child, { categoryName, componentName });
+    });
+}
 
@@ -426,0 +489,0 @@ exports.Category = Category;

dist/index.js

@@ -1,5 +0,53 @@
-import React, { useState, useCallback, useMemo, useEffect, Fragment } from 'react';
+import React, { useState, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
 
 const DEV_MODE = process.env.REACT_APP_IDE_DEVMODE === "true";
 
+const PALETTE_PATH = '/REACT_BUDDY_PALETTE';
+const URL_CHANGE_EVENT = "urlchange";
+const useRoute = (path, exact) => {
+    const [, setUpdate] = useState(false);
+    const update = useCallback(() => {
+        setUpdate((reRender) => {
+            return !reRender;
+        });
+    }, []);
+    useEffect(() => {
+        window.addEventListener(URL_CHANGE_EVENT, update);
+        window.addEventListener("popstate", update);
+        return () => {
+            window.removeEventListener(URL_CHANGE_EVENT, update);
+            window.removeEventListener("popstate", update);
+        };
+    }, []);
+    return isMatchPath(path, exact);
+};
+function isMatchPath(path, exact = false) {
+    const currentPath = getCurrentPath();
+    const match = new RegExp(`^${encodeURI(path)}`).exec(currentPath);
+    if (match) {
+        const [url] = match;
+        return exact ? currentPath === url : true;
+    }
+    return false;
+}
+function getCurrentPath() {
+    const { hash, pathname } = window.location;
+    return hash ? hash.replace("#", "") : pathname;
+}
+function historyPush(url) {
+    window.history.replaceState({}, "", url);
+    dispatchUrlChangeEvent(url);
+}
+function dispatchUrlChangeEvent(url) {
+    const urlChangeEvent = new CustomEvent(URL_CHANGE_EVENT, {
+        bubbles: true,
+        detail: url
+    });
+    window.dispatchEvent(urlChangeEvent);
+}
+
+if (DEV_MODE) {
+    window.reactBuddyHistoryPush = historyPush;
+}
+
 const withInitialHook = (useInitialHook) => {
@@ -59,4 +107,4 @@ const DevBootstrapWrapped = ({ children }) => {
 
-var css_248z$7 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".table-header {\n  border-color: #363636;\n  border-width: 1px 0;\n  border-style: solid;\n  font-weight: 800;\n  padding: 10px 20px 10px 10px;\n  display: flex;\n}\n.table-header:after {\n  content: \"\";\n}\n.table-header .table-header-item {\n  flex-basis: 22%;\n  color: #444;\n}\n.table-header .table-header-item-control {\n  flex-basis: 78%;\n  color: #444;\n}";
+styleInject(css_248z$8);
 
@@ -124,4 +172,4 @@ const TableHeader = () => {
 
-var css_248z$6 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ".radio-control {\n  display: flex;\n  align-items: center;\n  margin-right: 15px;\n}\n.radio-control label {\n  margin-right: 5px;\n}";
+styleInject(css_248z$7);
 
@@ -145,4 +193,4 @@ const Radio = (_a) => {
 
-var css_248z$5 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".json-editor {\n  flex-direction: column;\n}\n.json-editor .json-editor-textarea {\n  align-self: start;\n  width: 100%;\n  min-height: 100px;\n  margin: 0 0 10px 0;\n}\n.json-editor .json-editor-apply-button {\n  align-self: start;\n}";
+styleInject(css_248z$6);
 
@@ -186,4 +234,4 @@ const JsonEditor = ({ className, propName, propValue, propUpdate, }) => {
 
-var css_248z$4 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item, .table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".table-item-wrapper {\n  border-color: #363636;\n  border-width: 0 0 1px 0;\n  border-style: solid;\n  padding: 10px;\n  display: flex;\n}\n.table-item-wrapper:after {\n  content: \"\";\n}\n.table-item-wrapper .table-item, .table-item-wrapper .table-item-control {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n}\n.table-item-wrapper .table-item {\n  flex-basis: 22%;\n}\n.table-item-wrapper .table-item-control {\n  flex-basis: 78%;\n}";
+styleInject(css_248z$5);
 
@@ -196,4 +244,4 @@ const TableItem = ({ propName, propValue, onPropChange, controlType, data }) => {
 
-var css_248z$3 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".table-items {\n  background-color: whitesmoke;\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n}\n.table-items:after {\n  content: \"\";\n}";
+styleInject(css_248z$4);
 
@@ -290,4 +338,4 @@ const TableItems = ({ toolsPropsToEdit }) => {
 
-var css_248z$2 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
-styleInject(css_248z$2);
+var css_248z$3 = ".props-edit-table {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}";
+styleInject(css_248z$3);
 
@@ -300,4 +348,4 @@ const PropsEditTable = ({ toolsPropsToEdit }) => {
 
-var css_248z$1 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".tools-panel {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background-color: #eeeeee;\n}\n.tools-panel .empty-props-message {\n  color: red;\n}";
+styleInject(css_248z$2);
 
@@ -317,8 +365,10 @@ const ToolsPanel = ({ toolsPropsToEdit }) => {
 
-var css_248z = ".previews-main {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-content {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-tools-panel {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
-styleInject(css_248z);
+var css_248z$1 = ".previews-module_previewsMain__31L3F {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.previews-module_previewsContent__1aMUf {\n  flex-basis: 100%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.previews-module_previewsToolsPanel__30jjI {\n  flex-basis: 295px;\n  min-height: 100px;\n}";
+var styles$1 = {"previewsMain":"previews-module_previewsMain__31L3F","previewsContent":"previews-module_previewsContent__1aMUf","previewsToolsPanel":"previews-module_previewsToolsPanel__30jjI"};
+styleInject(css_248z$1);
 
-const Previews = ({ children }) => {
+const Previews = ({ children, palette = null }) => {
     const [toolsPropsToEdit, setToolsPropsToEdit] = useState(null);
     const [toolsPanelEnabled, enableToolsPanel] = useState(window.__PROPERTIES_EDIT_PANEL_ENABLED__);
+    const isPalettePath = useRoute(PALETTE_PATH);
     const childrenWithSetProps = useMemo(() => {
@@ -341,5 +391,8 @@ return children
     }, []);
-    return (React.createElement("div", { className: "previews-main" },
-        React.createElement("div", { className: "previews-content" }, childrenWithSetProps),
-        toolsPanelEnabled && (React.createElement("div", { className: "previews-tools-panel" },
+    if (isPalettePath) {
+        return palette;
+    }
+    return (React.createElement("div", { className: styles$1.previewsMain },
+        React.createElement("div", { className: styles$1.previewsContent }, childrenWithSetProps),
+        toolsPanelEnabled && (React.createElement("div", { className: styles$1.previewsToolsPanel },
             React.createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
@@ -349,17 +402,6 @@ };
 const RoutePreview = ({ children, path, exact, setPropsToEdit }) => {
-    const [, setUpdate] = useState(false);
     const [modfiedProps, setModifiedProps] = useState(null);
-    const update = useCallback(() => {
-        setUpdate((reRender) => {
-            return !reRender;
-        });
-    }, []);
+    const isMatchPath = useRoute(path, exact);
     useEffect(() => {
-        window.addEventListener('popstate', update);
-        return () => {
-            window.removeEventListener('popstate', update);
-        };
-    }, []);
-    useEffect(() => {
-        if (isMatchPath(path, exact)) {
+        if (isMatchPath) {
             const currentProps = modfiedProps !== null && modfiedProps !== void 0 ? modfiedProps : children.props;
@@ -373,23 +415,10 @@ const propsToEdit = {
         return () => {
-            isMatchPath(path, exact) ? null : setModifiedProps(null);
+            isMatchPath ? null : setModifiedProps(null);
         };
-    });
+    }, [isMatchPath]);
     const childrenWithUpdatedProps = modfiedProps
         ? React.cloneElement(children, Object.assign({}, modfiedProps))
         : children;
-    return isMatchPath(path, exact) ? React.createElement(React.Fragment, null, childrenWithUpdatedProps) : null;
+    return isMatchPath ? React.createElement(React.Fragment, null, childrenWithUpdatedProps) : null;
 };
-function isMatchPath(path, exact = false) {
-    const currentPath = getCurrentPath();
-    const match = new RegExp(`^${path}`).exec(currentPath);
-    if (match) {
-        const [url] = match;
-        return exact ? currentPath === url : true;
-    }
-    return false;
-}
-function getCurrentPath() {
-    const { hash, pathname } = window.location;
-    return hash ? hash.replace("#", "") : pathname;
-}
 
@@ -403,16 +432,50 @@ const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo }) => {
 
-const Palette = ({ children }) => {
-    return (React.createElement(Fragment, null, children));
+const DEFAULT_VARIANT_NAME = "DEFAULT_VARIANT";
+const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children }) => {
+    const paletteItemPath = useMemo(() => {
+        return getPaletteItemPath([categoryName, componentName, variantName]);
+    }, [categoryName, componentName, variantName]);
+    const isPathMatch = useRoute(paletteItemPath, true);
+    return isPathMatch
+        ? React.createElement(React.Fragment, null, children)
+        : null;
 };
-const Component = ({ children }) => {
-    return (React.createElement(Fragment, null, children));
+function getPaletteItemPath(names) {
+    return PALETTE_PATH + "/" + names.filter(name => name != null).join("/");
+}
+
+var css_248z = ".palette-module_palette__3nMCV {\n  display: flex;\n  width: 100vw;\n  height: 100vh;\n  justify-content: center;\n  align-items: center;\n}\n\n.palette-module_bodyPaletteStyles__3w-dB {\n  padding: 0;\n  margin: 0;\n}";
+var styles = {"palette":"palette-module_palette__3nMCV","bodyPaletteStyles":"palette-module_bodyPaletteStyles__3w-dB"};
+styleInject(css_248z);
+
+const Category = ({ children, name }) => {
+    return (React.createElement(React.Fragment, null, getTransformedCategoryChildren(children, name)));
 };
-const Category = ({ children }) => {
-    return (React.createElement(Fragment, null, children));
+const Component = ({ children, categoryName, name }) => {
+    return (React.createElement(React.Fragment, null, getTransformedComponentChildren(children, name, categoryName)));
 };
-const Variant = ({ children }) => {
-    return (React.createElement(Fragment, null, children));
+const Variant = ({ children, categoryName, componentName, name }) => {
+    return (React.createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name }, children));
 };
+const Palette = ({ children }) => {
+    useLayoutEffect(() => {
+        document.body.classList.add(styles.bodyPaletteStyles);
+        return () => {
+            document.body.classList.remove(styles.bodyPaletteStyles);
+        };
+    }, []);
+    return (React.createElement("div", { className: styles.palette }, children));
+};
+function getTransformedCategoryChildren(children, categoryName) {
+    return React.Children.map(children, (child) => {
+        return React.cloneElement(child, { categoryName });
+    });
+}
+function getTransformedComponentChildren(children, componentName, categoryName) {
+    return React.Children.map(children, (child) => {
+        return React.cloneElement(child, { categoryName, componentName });
+    });
+}
 
 export { Category, Component, ComponentPreview, DevSupport, Palette, Previews, PropsControlTypes, Variant };
 //# sourceMappingURL=index.js.map

dist/palette/palette.d.ts

 import React from "react";
-export declare const Palette: React.FC;
+export declare type CategoryProps = {
+    name: string;
+    children: JSX.Element | JSX.Element[];
+};
 export declare type ComponentProps = {
-    name?: string;
+    categoryName?: string;
+    name: string;
+    children: JSX.Element | JSX.Element[];
     defaultProps?: {};
 };
-export declare const Component: React.FC<ComponentProps>;
-export declare const Category: React.FC<{
-    name: String;
-}>;
 export declare type VariantProps = {
-    name?: String;
+    categoryName?: string;
+    componentName?: string;
+    name?: string;
     requiredParams?: Array<string>;
 };
+export declare const Category: React.FC<CategoryProps>;
+export declare const Component: React.FC<ComponentProps>;
 export declare const Variant: React.FC<VariantProps>;
+export declare const Palette: React.FC;

dist/previews/previews.d.ts

 import React from "react";
-import "./previews.scss";
 interface Props {
+    palette?: JSX.Element | null;
     children?: JSX.Element | JSX.Element[];
@@ -5,0 +5,0 @@ }

dist/previews/route-preview.d.ts

 import React from "react";
 import { PropsModifier } from "./previews.types";
-interface RouteProps {
-    children: JSX.Element;
-    path: string;
-    exact?: boolean;
+import { RouteProps } from "../routing/routing";
+declare type RoutePreviewProps = RouteProps & {
     setPropsToEdit: (propsModifier: PropsModifier) => void;
-}
-export declare const RoutePreview: React.FC<RouteProps>;
-export declare function isMatchPath(path: string, exact?: boolean): boolean;
+};
+export declare const RoutePreview: React.FC<RoutePreviewProps>;
 export {};

package.json

 {
   "name": "@react-buddy/ide-toolbox",
-  "version": "1.0.0",
+  "version": "1.1.0-dev.0",
   "description": "React IDE toolbox",
@@ -49,3 +49,3 @@ "main": "dist/index.js",
   "license": "Apache-2.0",
-  "gitHead": "a97e833ed5d5b269abd7abb238b3322e7d3f4241"
+  "gitHead": "69a32ac08d99c94730822ada773656b9ca3e7966"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

189187

increased by11.17%

Number of package files

43

increased by7.5%

Lines of code

1122

increased by14.49%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes