@code-hike/mini-frame - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0-next.0

dist/index.cjs.js

@@ -5,6 +5,9 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var React = require('react');
+var classer = require('@code-hike/classer');
 
-var React = _interopDefault(require('react'));
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 /*! *****************************************************************************
@@ -48,31 +51,33 @@ Copyright (c) Microsoft Corporation.
 
-var e=[],t=[];function injector_e6a70ff9(n,r){if(n&&"undefined"!=typeof document){void 0===r&&(r={});var d,a=!0===r.prepend?"prepend":"append",i="undefined"!=typeof r.singleTag&&r.singleTag,s="undefined"!=typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(i){var u=e.indexOf(s);-1===u&&(u=e.push(s)-1,t[u]={}),d=t[u]&&t[u][a]?t[u][a]:t[u][a]=o();}else d=o();65279===n.charCodeAt(0)&&(n=n.substring(1)),d.styleSheet?d.styleSheet.cssText+=n:d.appendChild(document.createTextNode(n));}function o(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var d="prepend"===a?"afterbegin":"beforeend";return s.insertAdjacentElement(d,e),e}}
-
-const css_b9917d1e = ".ch-frame{border-radius:6px;overflow:hidden;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);font-family:Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif;height:100%;display:flex;flex-direction:column;background-color:#252526}.ch-frame-content{background-color:#fafafa;flex-grow:1;flex-shrink:1;min-height:0}.ch-frame-zoom{--ch-frame-zoom:1;overflow:auto;position:relative;width:calc(100%/var(--ch-frame-zoom));height:calc(100%/var(--ch-frame-zoom));transform:scale(var(--ch-frame-zoom));transform-origin:left top}.ch-title-bar{font-size:12px;width:100%;height:2.5em;min-height:2.5em;flex-grow:0;flex-shrink:0;display:flex;align-items:center;background-color:#252526;color:#ebebed}.ch-middle-bar{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:1.2em}.ch-left-bar,.ch-right-bar{flex-grow:1;flex-basis:1em;height:100%;display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ch-frame-buttons{margin:0 .8em;flex-shrink:0;height:1em;width:4.16em;display:flex}.ch-frame-button{width:1em;height:1em;border:.08em solid;border-radius:50%;display:inline-block;box-sizing:border-box}.ch-frame-button-space{width:.56em}.ch-frame-button.red{border-color:#ce5347;background-color:#ed6b60}.ch-frame-button.yellow{border-color:#d6a243;background-color:#f5be4f}.ch-frame-button.green{border-color:#58a942;background-color:#62c554}";
-injector_e6a70ff9(css_b9917d1e,{"singleTag":true});
-
 function MiniFrame(_a) {
-    var title = _a.title, children = _a.children, titleBar = _a.titleBar, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "zoom"]);
-    var bar = titleBar || React.createElement(DefaultTitleBar, { title: title });
-    return (React.createElement("div", __assign({}, props),
-        React.createElement("div", { className: "ch-frame" },
-            React.createElement("div", { className: "ch-title-bar" }, bar),
-            React.createElement("div", { className: "ch-frame-content" },
-                React.createElement("div", { className: "ch-frame-zoom", style: { "--ch-frame-zoom": zoom } }, children)))));
+    var title = _a.title, children = _a.children, titleBar = _a.titleBar, classes = _a.classes, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
+    var c = classer.useClasser("ch-frame", classes);
+    var bar = titleBar || React__default['default'].createElement(DefaultTitleBar, { title: title });
+    var zoomStyle = {
+        "--ch-frame-zoom": zoom,
+    };
+    return (React__default['default'].createElement(classer.ClasserProvider, { classes: classes },
+        React__default['default'].createElement("div", __assign({}, props),
+            React__default['default'].createElement("div", { className: c("") },
+                React__default['default'].createElement("div", { className: c("title-bar") }, bar),
+                React__default['default'].createElement("div", { className: c("content") },
+                    React__default['default'].createElement("div", { className: c("zoom"), style: zoomStyle }, children))))));
 }
 function DefaultTitleBar(_a) {
     var title = _a.title;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "ch-left-bar" },
-            React.createElement(FrameButtons, null)),
-        React.createElement("div", { className: "ch-middle-bar" }, title),
-        React.createElement("div", { className: "ch-right-bar" })));
+    var c = classer.useClasser("ch-frame");
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement("div", { className: c("left-bar") },
+            React__default['default'].createElement(FrameButtons, null)),
+        React__default['default'].createElement("div", { className: c("middle-bar") }, title),
+        React__default['default'].createElement("div", { className: c("right-bar") })));
 }
 function FrameButtons() {
-    return (React.createElement("div", { className: "ch-frame-buttons" },
-        React.createElement("div", { className: "ch-frame-button red" }),
-        React.createElement("div", { className: "ch-frame-button-space" }),
-        React.createElement("div", { className: "ch-frame-button yellow" }),
-        React.createElement("div", { className: "ch-frame-button-space" }),
-        React.createElement("div", { className: "ch-frame-button green" })));
+    var c = classer.useClasser("ch-frame");
+    return (React__default['default'].createElement("div", { className: c("buttons") },
+        React__default['default'].createElement("div", { className: c("button", "button-left") }),
+        React__default['default'].createElement("div", { className: c("button-space") }),
+        React__default['default'].createElement("div", { className: c("button", "button-middle") }),
+        React__default['default'].createElement("div", { className: c("button-space") }),
+        React__default['default'].createElement("div", { className: c("button", "button-right") })));
 }
@@ -79,0 +84,0 @@

dist/index.d.ts

 import { MiniFrame, FrameButtons } from "./mini-frame";
+import "./index.scss";
 export { MiniFrame, FrameButtons };

dist/index.esm.js

 import React from 'react';
+import { useClasser, ClasserProvider } from '@code-hike/classer';
 
@@ -41,33 +42,35 @@ /*! *****************************************************************************
 
-var e=[],t=[];function injector_e6a70ff9(n,r){if(n&&"undefined"!=typeof document){void 0===r&&(r={});var d,a=!0===r.prepend?"prepend":"append",i="undefined"!=typeof r.singleTag&&r.singleTag,s="undefined"!=typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(i){var u=e.indexOf(s);-1===u&&(u=e.push(s)-1,t[u]={}),d=t[u]&&t[u][a]?t[u][a]:t[u][a]=o();}else d=o();65279===n.charCodeAt(0)&&(n=n.substring(1)),d.styleSheet?d.styleSheet.cssText+=n:d.appendChild(document.createTextNode(n));}function o(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var d="prepend"===a?"afterbegin":"beforeend";return s.insertAdjacentElement(d,e),e}}
-
-const css_b9917d1e = ".ch-frame{border-radius:6px;overflow:hidden;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);font-family:Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif;height:100%;display:flex;flex-direction:column;background-color:#252526}.ch-frame-content{background-color:#fafafa;flex-grow:1;flex-shrink:1;min-height:0}.ch-frame-zoom{--ch-frame-zoom:1;overflow:auto;position:relative;width:calc(100%/var(--ch-frame-zoom));height:calc(100%/var(--ch-frame-zoom));transform:scale(var(--ch-frame-zoom));transform-origin:left top}.ch-title-bar{font-size:12px;width:100%;height:2.5em;min-height:2.5em;flex-grow:0;flex-shrink:0;display:flex;align-items:center;background-color:#252526;color:#ebebed}.ch-middle-bar{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:1.2em}.ch-left-bar,.ch-right-bar{flex-grow:1;flex-basis:1em;height:100%;display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ch-frame-buttons{margin:0 .8em;flex-shrink:0;height:1em;width:4.16em;display:flex}.ch-frame-button{width:1em;height:1em;border:.08em solid;border-radius:50%;display:inline-block;box-sizing:border-box}.ch-frame-button-space{width:.56em}.ch-frame-button.red{border-color:#ce5347;background-color:#ed6b60}.ch-frame-button.yellow{border-color:#d6a243;background-color:#f5be4f}.ch-frame-button.green{border-color:#58a942;background-color:#62c554}";
-injector_e6a70ff9(css_b9917d1e,{"singleTag":true});
-
 function MiniFrame(_a) {
-    var title = _a.title, children = _a.children, titleBar = _a.titleBar, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "zoom"]);
+    var title = _a.title, children = _a.children, titleBar = _a.titleBar, classes = _a.classes, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
+    var c = useClasser("ch-frame", classes);
     var bar = titleBar || React.createElement(DefaultTitleBar, { title: title });
-    return (React.createElement("div", __assign({}, props),
-        React.createElement("div", { className: "ch-frame" },
-            React.createElement("div", { className: "ch-title-bar" }, bar),
-            React.createElement("div", { className: "ch-frame-content" },
-                React.createElement("div", { className: "ch-frame-zoom", style: { "--ch-frame-zoom": zoom } }, children)))));
+    var zoomStyle = {
+        "--ch-frame-zoom": zoom,
+    };
+    return (React.createElement(ClasserProvider, { classes: classes },
+        React.createElement("div", __assign({}, props),
+            React.createElement("div", { className: c("") },
+                React.createElement("div", { className: c("title-bar") }, bar),
+                React.createElement("div", { className: c("content") },
+                    React.createElement("div", { className: c("zoom"), style: zoomStyle }, children))))));
 }
 function DefaultTitleBar(_a) {
     var title = _a.title;
+    var c = useClasser("ch-frame");
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "ch-left-bar" },
+        React.createElement("div", { className: c("left-bar") },
             React.createElement(FrameButtons, null)),
-        React.createElement("div", { className: "ch-middle-bar" }, title),
-        React.createElement("div", { className: "ch-right-bar" })));
+        React.createElement("div", { className: c("middle-bar") }, title),
+        React.createElement("div", { className: c("right-bar") })));
 }
 function FrameButtons() {
-    return (React.createElement("div", { className: "ch-frame-buttons" },
-        React.createElement("div", { className: "ch-frame-button red" }),
-        React.createElement("div", { className: "ch-frame-button-space" }),
-        React.createElement("div", { className: "ch-frame-button yellow" }),
-        React.createElement("div", { className: "ch-frame-button-space" }),
-        React.createElement("div", { className: "ch-frame-button green" })));
+    var c = useClasser("ch-frame");
+    return (React.createElement("div", { className: c("buttons") },
+        React.createElement("div", { className: c("button", "button-left") }),
+        React.createElement("div", { className: c("button-space") }),
+        React.createElement("div", { className: c("button", "button-middle") }),
+        React.createElement("div", { className: c("button-space") }),
+        React.createElement("div", { className: c("button", "button-right") })));
 }
 
 export { FrameButtons, MiniFrame };

dist/index.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-    (global = global || self, factory(global.foo = {}, global.React));
-}(this, (function (exports, React) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@code-hike/classer')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@code-hike/classer'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ch = {}, global.React, global.classer));
+}(this, (function (exports, React, classer) { 'use strict';
 
-    React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
     /*! *****************************************************************************
@@ -47,31 +49,33 @@ Copyright (c) Microsoft Corporation.
 
-    var e=[],t=[];function injector_e6a70ff9(n,r){if(n&&"undefined"!=typeof document){void 0===r&&(r={});var d,a=!0===r.prepend?"prepend":"append",i="undefined"!=typeof r.singleTag&&r.singleTag,s="undefined"!=typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(i){var u=e.indexOf(s);-1===u&&(u=e.push(s)-1,t[u]={}),d=t[u]&&t[u][a]?t[u][a]:t[u][a]=o();}else d=o();65279===n.charCodeAt(0)&&(n=n.substring(1)),d.styleSheet?d.styleSheet.cssText+=n:d.appendChild(document.createTextNode(n));}function o(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var d="prepend"===a?"afterbegin":"beforeend";return s.insertAdjacentElement(d,e),e}}
-
-    const css_b9917d1e = ".ch-frame{border-radius:6px;overflow:hidden;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);font-family:Ubuntu,Droid Sans,-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,sans-serif;height:100%;display:flex;flex-direction:column;background-color:#252526}.ch-frame-content{background-color:#fafafa;flex-grow:1;flex-shrink:1;min-height:0}.ch-frame-zoom{--ch-frame-zoom:1;overflow:auto;position:relative;width:calc(100%/var(--ch-frame-zoom));height:calc(100%/var(--ch-frame-zoom));transform:scale(var(--ch-frame-zoom));transform-origin:left top}.ch-title-bar{font-size:12px;width:100%;height:2.5em;min-height:2.5em;flex-grow:0;flex-shrink:0;display:flex;align-items:center;background-color:#252526;color:#ebebed}.ch-middle-bar{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:1.2em}.ch-left-bar,.ch-right-bar{flex-grow:1;flex-basis:1em;height:100%;display:flex;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ch-frame-buttons{margin:0 .8em;flex-shrink:0;height:1em;width:4.16em;display:flex}.ch-frame-button{width:1em;height:1em;border:.08em solid;border-radius:50%;display:inline-block;box-sizing:border-box}.ch-frame-button-space{width:.56em}.ch-frame-button.red{border-color:#ce5347;background-color:#ed6b60}.ch-frame-button.yellow{border-color:#d6a243;background-color:#f5be4f}.ch-frame-button.green{border-color:#58a942;background-color:#62c554}";
-    injector_e6a70ff9(css_b9917d1e,{"singleTag":true});
-
     function MiniFrame(_a) {
-        var title = _a.title, children = _a.children, titleBar = _a.titleBar, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "zoom"]);
-        var bar = titleBar || React.createElement(DefaultTitleBar, { title: title });
-        return (React.createElement("div", __assign({}, props),
-            React.createElement("div", { className: "ch-frame" },
-                React.createElement("div", { className: "ch-title-bar" }, bar),
-                React.createElement("div", { className: "ch-frame-content" },
-                    React.createElement("div", { className: "ch-frame-zoom", style: { "--ch-frame-zoom": zoom } }, children)))));
+        var title = _a.title, children = _a.children, titleBar = _a.titleBar, classes = _a.classes, _b = _a.zoom, zoom = _b === void 0 ? 1 : _b, props = __rest(_a, ["title", "children", "titleBar", "classes", "zoom"]);
+        var c = classer.useClasser("ch-frame", classes);
+        var bar = titleBar || React__default['default'].createElement(DefaultTitleBar, { title: title });
+        var zoomStyle = {
+            "--ch-frame-zoom": zoom,
+        };
+        return (React__default['default'].createElement(classer.ClasserProvider, { classes: classes },
+            React__default['default'].createElement("div", __assign({}, props),
+                React__default['default'].createElement("div", { className: c("") },
+                    React__default['default'].createElement("div", { className: c("title-bar") }, bar),
+                    React__default['default'].createElement("div", { className: c("content") },
+                        React__default['default'].createElement("div", { className: c("zoom"), style: zoomStyle }, children))))));
     }
     function DefaultTitleBar(_a) {
         var title = _a.title;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "ch-left-bar" },
-                React.createElement(FrameButtons, null)),
-            React.createElement("div", { className: "ch-middle-bar" }, title),
-            React.createElement("div", { className: "ch-right-bar" })));
+        var c = classer.useClasser("ch-frame");
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement("div", { className: c("left-bar") },
+                React__default['default'].createElement(FrameButtons, null)),
+            React__default['default'].createElement("div", { className: c("middle-bar") }, title),
+            React__default['default'].createElement("div", { className: c("right-bar") })));
     }
     function FrameButtons() {
-        return (React.createElement("div", { className: "ch-frame-buttons" },
-            React.createElement("div", { className: "ch-frame-button red" }),
-            React.createElement("div", { className: "ch-frame-button-space" }),
-            React.createElement("div", { className: "ch-frame-button yellow" }),
-            React.createElement("div", { className: "ch-frame-button-space" }),
-            React.createElement("div", { className: "ch-frame-button green" })));
+        var c = classer.useClasser("ch-frame");
+        return (React__default['default'].createElement("div", { className: c("buttons") },
+            React__default['default'].createElement("div", { className: c("button", "button-left") }),
+            React__default['default'].createElement("div", { className: c("button-space") }),
+            React__default['default'].createElement("div", { className: c("button", "button-middle") }),
+            React__default['default'].createElement("div", { className: c("button-space") }),
+            React__default['default'].createElement("div", { className: c("button", "button-right") })));
     }
@@ -78,0 +82,0 @@

dist/mini-frame.d.ts

 import React from "react";
-import "./mini-frame.css";
+import { Classes } from "@code-hike/classer";
 declare type MiniFrameProps = {
@@ -7,5 +7,6 @@ title?: string;
     zoom?: number;
+    classes?: Classes;
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>;
-export declare function MiniFrame({ title, children, titleBar, zoom, ...props }: MiniFrameProps): JSX.Element;
+export declare function MiniFrame({ title, children, titleBar, classes, zoom, ...props }: MiniFrameProps): JSX.Element;
 export declare function FrameButtons(): JSX.Element;
 export {};

package.json

 {
   "name": "@code-hike/mini-frame",
-  "version": "0.2.1",
+  "version": "0.3.0-next.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.esm.js",
+  "style": "dist/index.css",
   "files": [
@@ -11,8 +12,8 @@ "dist"
   "scripts": {
-    "build": "ch-build",
-    "watch": "ch-build --watch"
+    "x": "x",
+    "publish-canary": "yarn publish --tag canary --access public"
   },
   "devDependencies": {
+    "@code-hike/script": "0.0.1",
     "@types/react": "^16.9.38",
-    "@code-hike/build": "0.0.1",
     "react": "^16.13.1"
@@ -28,2 +29,3 @@ },
   "repository": "code-hike/codehike",
+  "author": "Rodrigo Pombo",
   "license": "MIT",
@@ -33,3 +35,7 @@ "funding": {
     "url": "https://opencollective.com/codehike"
-  }
+  },
+  "dependencies": {
+    "@code-hike/classer": "^0.3.0-next.0"
+  },
+  "gitHead": "5af3995f94e4c4c58f7db87c063465b4741d3504"
 }

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Number of package files

10

increased by42.86%

Number of low maintenance alerts

1

decreased by-50%

Number of low supply chain risk alerts

1

decreased by-75%

Worsened metrics

Total package byte prevSize

18831

decreased by-1.78%

Dependency count

2

increased by100%

Lines of code

231

decreased by-2.53%

Dependency changes

• + Added@code-hike/classer@^0.3.0-next.0

• + Added@code-hike/classer@0.3.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)