no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.3

package/lib-esm/shared/LayerManager.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect } from 'react';
-import styled from '@emotion/styled';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import styled from '@emotion/styled';
 /** Enums for layer position on screen. */
 export var LAYER_POSITION;
 (function (LAYER_POSITION) {
@@ -13,7 +13,6 @@ export var LAYER_POSITION;
     LAYER_POSITION[LAYER_POSITION["BOTTOM_RIGHT"] = 5] = "BOTTOM_RIGHT";
     LAYER_POSITION[LAYER_POSITION["DIALOG"] = 6] = "DIALOG";
 })(LAYER_POSITION || (LAYER_POSITION = {}));
-;
 /** Default value of config */
 const defaultConfig = {
     closeOnEsc: true,
@@ -39,27 +38,29 @@ const Container = styled.div `
     position: fixed;
     display: flex;
     opacity: 0;
-    transition: opacity .3s ease;
-    ${props => POSITION_STYLE[props.position]}
-    ${props => props.overlay && `
+    transition: opacity 0.3s ease;
+    ${(props) => POSITION_STYLE[props.position]}
+    ${(props) => props.overlay &&
+    `
         width: 100%;
         height: 100vh;
         background-color: var(--backdrop-color, #2681da80);
         backdrop-filter: blur(0px);
         pointer-events: all;
     `}
-    z-index: ${props => props.zIndex};
+    z-index: ${(props) => props.zIndex};
 
     .nf-layer-enter & {
         opacity: 1;
-        ${props => props.overlay && `
+        ${(props) => props.overlay &&
+    `
             backdrop-filter: blur(3px);
         `}
     }
 `;
 /** Key code for different keys. */
 const KEY_CODES = {
-    ESC: 27
+    ESC: 27,
 };
 /**
  * This is a shared helper class which manages the z-index of each layer.
@@ -70,6 +71,32 @@ const KEY_CODES = {
  * This way we need not worry about the z-index and can freely keep on creating
  * new layers. The staring layer z-index is 10000. Leaving enough z-index for the
  * user if they desires so.
+ *
+ * @important Usage Pattern
+ * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),
+ * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)
+ * or in an imperative method (like `open()`).
+ *
+ * @example
+ * // ❌ Don't call renderLayer in render() method
+ * render() {
+ *   if (this.state.show) {
+ *     const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render
+ *     return <Component />;
+ *   }
+ * }
+ *
+ * @example
+ * // ✅ Do call renderLayer once in a method and store the component
+ * open() {
+ *   const [Component, closeFn] = LayerManager.renderLayer({ ... });
+ *   this.setState({ LayerComponent: Component });
+ * }
+ *
+ * render() {
+ *   const { LayerComponent } = this.state;
+ *   return LayerComponent ? <LayerComponent /> : null;
+ * }
  */
 class LayerManager {
     /**
@@ -92,10 +119,11 @@ class LayerManager {
          */
         this.unmount = (layer, resp) => {
             layer.element.setAttribute('class', 'nf-layer-exit');
-            this.layers.splice(this.layers.findIndex(item => item === layer), 1);
+            this.layers.splice(this.layers.findIndex((item) => item === layer), 1);
             setTimeout(() => {
+                var _a, _b;
                 try {
-                    layer.config.closeCallback && layer.config.closeCallback(resp);
+                    (_b = (_a = layer.config).closeCallback) === null || _b === void 0 ? void 0 : _b.call(_a, resp);
                 }
                 catch (e) {
                     // Error in callback function. Ignore and proceed.
@@ -108,57 +136,79 @@ class LayerManager {
          * @param config
          */
         this.renderLayer = (config) => {
+            // SSR guard
+            if (typeof document === 'undefined') {
+                return [() => null, () => { }];
+            }
             // Merge default config with the provided config.
             const layerConfig = Object.assign(Object.assign({}, defaultConfig), config);
             // Get the z-index for the new layer
             const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;
-            // Prepare the div on DOM where the new layer will be mounted.
-            const divElement = document.createElement('div');
-            divElement.setAttribute('id', `nf-layer-manager-${currentIndex}`);
-            document.body.appendChild(divElement);
-            // Add layer to stack.
-            const currentLayer = {
-                id: `nf-layer-manager-${currentIndex}`,
-                config: layerConfig,
-                element: divElement
+            // Create a unique ID for tracking this layer
+            const layerId = `nf-layer-manager-${currentIndex}`;
+            const overlayClickHandler = () => {
+                const layer = this.layers.find((l) => l.id === layerId);
+                if (layer && layer.config.closeOnOverlayClick !== false) {
+                    this.unmount(layer);
+                }
             };
-            this.layers.push(currentLayer);
-            const overlayClickHandler = (layer) => () => {
-                layer.config.closeOnOverlayClick !== false && this.unmount(layer);
+            const closeFn = (resp) => {
+                const layer = this.layers.find((l) => l.id === layerId);
+                if (layer) {
+                    this.unmount(layer, resp);
+                }
             };
             // Return callback which will trigger the un-mount.
             return [
-                // Render the layer and then add `nf-layer-enter` class to
-                // the div created above.
-                // This class will help component in triggering the entry animation.
-                function TestLayer() {
+                () => {
+                    const [divElement, setDivElement] = React.useState(null);
                     useEffect(() => {
-                        // The delay is introduced to enable entry animation on Firefox.
-                        // Somehow on Firefox, useEffect is triggered before the component
-                        // is rendered it seems.
+                        // Create the div element only once when component mounts
+                        const div = document.createElement('div');
+                        div.setAttribute('id', layerId);
+                        document.body.appendChild(div);
+                        // Add layer to stack
+                        const currentLayer = {
+                            id: layerId,
+                            config: layerConfig,
+                            element: div,
+                        };
+                        this.layers.push(currentLayer);
+                        setDivElement(div);
+                        // Add entry animation class after a short delay
                         setTimeout(() => {
-                            divElement.setAttribute('class', 'nf-layer-enter');
+                            div.setAttribute('class', 'nf-layer-enter');
                         }, 10);
-                        // Cleanup function
+                        // Cleanup function - remove div when component unmounts
                         return () => {
-                            document.body.removeChild(divElement);
+                            if (document.body.contains(div)) {
+                                document.body.removeChild(div);
+                            }
+                            // Remove from layers array
+                            const index = this.layers.findIndex((layer) => layer.id === layerId);
+                            if (index !== -1) {
+                                this.layers.splice(index, 1);
+                            }
                         };
-                    }, []);
-                    return ReactDOM.createPortal(_jsx(Container, Object.assign({ onClick: overlayClickHandler(currentLayer), zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
+                    }, []); // Empty dependency array - run only once
+                    if (!divElement) {
+                        return null;
+                    }
+                    return ReactDOM.createPortal(_jsx(Container, Object.assign({ onClick: overlayClickHandler, zIndex: currentIndex }, layerConfig, { children: layerConfig.component })), divElement);
                 },
-                (resp) => {
-                    this.unmount(currentLayer, resp);
-                }
+                closeFn,
             ];
         };
-        document.body.addEventListener('keyup', (e) => {
-            if (this.layers.length && e.keyCode === KEY_CODES.ESC) {
-                const lastLayer = this.layers.slice(-1)[0];
-                if (lastLayer.config.closeOnEsc !== false) {
-                    this.unmount(lastLayer);
+        if (typeof document !== 'undefined') {
+            document.body.addEventListener('keyup', (e) => {
+                if (this.layers.length && e.keyCode === KEY_CODES.ESC) {
+                    const lastLayer = this.layers.slice(-1)[0];
+                    if (lastLayer.config.closeOnEsc !== false) {
+                        this.unmount(lastLayer);
+                    }
                 }
-            }
-        });
+            });
+        }
     }
 }
 // Return the instance of the class to create a Singleton.

package/lib-esm/shared/LayerManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerManager.js","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LayerManager.js","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactPortal, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from '@emotion/styled';\n\n/** Enums for layer position on screen. */\nexport enum LAYER_POSITION {\n    TOP_LEFT,\n    TOP_CENTER,\n    TOP_RIGHT,\n    BOTTOM_LEFT,\n    BOTTOM_CENTER,\n    BOTTOM_RIGHT,\n    DIALOG,\n}\n\ninterface LayerConfig {\n    /** Show an overlay */\n    overlay?: boolean;\n    /** Element to render inside the layer. */\n    component: JSX.Element;\n    /** Position of the layer */\n    position?: LAYER_POSITION;\n    /** Delay for exit */\n    exitDelay?: number;\n    /** Close layer on `esc` key press. */\n    closeOnEsc?: boolean;\n    /** Close layer overlay is clicked. */\n    closeOnOverlayClick?: boolean;\n    /** Callback called when modal closes */\n    closeCallback?: <T>(resp: T) => void;\n    /** Layer is created with max z-index */\n    alwaysOnTop?: boolean;\n}\n\n/** Default value of config */\nconst defaultConfig: LayerConfig = {\n    closeOnEsc: true,\n    overlay: false,\n    position: LAYER_POSITION.TOP_LEFT,\n    component: null,\n    exitDelay: 0,\n    closeOnOverlayClick: true,\n    alwaysOnTop: false,\n};\n\n/** Metadata of each layer */\ninterface Layer {\n    id: string;\n    config: LayerConfig;\n    element: HTMLDivElement;\n}\n\n/** Styles for each position */\nconst POSITION_STYLE = {\n    [LAYER_POSITION.TOP_LEFT]: 'top: 0; left: 0;',\n    [LAYER_POSITION.TOP_CENTER]: 'top: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.TOP_RIGHT]: 'top: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.BOTTOM_LEFT]: 'bottom: 0; left: 0;',\n    [LAYER_POSITION.BOTTOM_CENTER]: 'bottom: 0; left: 50%; justify-content: center;',\n    [LAYER_POSITION.BOTTOM_RIGHT]: 'bottom: 0; right: 0; justify-content: flex-end;',\n    [LAYER_POSITION.DIALOG]: 'top: 0; left: 0; justify-content: center; align-items: center;',\n};\n\n/** Layer container component. */\nconst Container = styled.div<LayerConfig & { zIndex: number }>`\n    position: fixed;\n    display: flex;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    ${(props) => POSITION_STYLE[props.position]}\n    ${(props) =>\n        props.overlay &&\n        `\n        width: 100%;\n        height: 100vh;\n        background-color: var(--backdrop-color, #2681da80);\n        backdrop-filter: blur(0px);\n        pointer-events: all;\n    `}\n    z-index: ${(props) => props.zIndex};\n\n    .nf-layer-enter & {\n        opacity: 1;\n        ${(props) =>\n            props.overlay &&\n            `\n            backdrop-filter: blur(3px);\n        `}\n    }\n`;\n\n/** Key code for different keys. */\nconst KEY_CODES = {\n    ESC: 27,\n};\n\n/**\n * This is a shared helper class which manages the z-index of each layer.\n * If a component needs to be rendered in a different layer then this class\n * should be used. It internally maintains the stack of opened layer and each\n * `renderLayer` call will push a new layer in stack.\n *\n * This way we need not worry about the z-index and can freely keep on creating\n * new layers. The staring layer z-index is 10000. Leaving enough z-index for the\n * user if they desires so.\n *\n * @important Usage Pattern\n * To avoid creating duplicate layers (especially in React Strict Mode or Next.js),\n * always call `renderLayer` only once - either in a lifecycle method (like `componentDidUpdate`)\n * or in an imperative method (like `open()`).\n *\n * @example\n * // ❌ Don't call renderLayer in render() method\n * render() {\n *   if (this.state.show) {\n *     const [Component, closeFn] = LayerManager.renderLayer({ ... }); // Creates new layer on every render\n *     return <Component />;\n *   }\n * }\n *\n * @example\n * // ✅ Do call renderLayer once in a method and store the component\n * open() {\n *   const [Component, closeFn] = LayerManager.renderLayer({ ... });\n *   this.setState({ LayerComponent: Component });\n * }\n *\n * render() {\n *   const { LayerComponent } = this.state;\n *   return LayerComponent ? <LayerComponent /> : null;\n * }\n */\nclass LayerManager {\n    /** Layer stack */\n    private layers: Layer[] = [];\n    /** z-index of the next layer */\n    private nextIndex = 10000;\n\n    /**\n     * Constructor simply registers a event listener on body to\n     * react to esc key press.\n     */\n    constructor() {\n        if (typeof document !== 'undefined') {\n            document.body.addEventListener('keyup', (e) => {\n                if (this.layers.length && e.keyCode === KEY_CODES.ESC) {\n                    const lastLayer = this.layers.slice(-1)[0];\n                    if (lastLayer.config.closeOnEsc !== false) {\n                        this.unmount(lastLayer);\n                    }\n                }\n            });\n        }\n    }\n\n    /**\n     * Un-mounts a layer.\n     *\n     * It first adds a class 'nf-layer-exit' and then un-mounts the\n     * layer after the `exitDelay` mentioned in the layer config.\n     * This class will help component in triggering the entry animation.\n     *\n     * @param layer\n     */\n    private unmount = (layer: Layer, resp?: unknown) => {\n        layer.element.setAttribute('class', 'nf-layer-exit');\n        this.layers.splice(\n            this.layers.findIndex((item) => item === layer),\n            1,\n        );\n\n        setTimeout(() => {\n            try {\n                layer.config.closeCallback?.(resp);\n            } catch (e) {\n                // Error in callback function. Ignore and proceed.\n                console.warn(e.message);\n            }\n        }, layer.config.exitDelay);\n    };\n\n    /**\n     * Renders a layer.\n     * @param config\n     */\n    public renderLayer = (\n        config: LayerConfig,\n    ): [() => React.ReactPortal | null, (resp?: unknown) => void] => {\n        // SSR guard\n        if (typeof document === 'undefined') {\n            return [() => null, () => {}];\n        }\n\n        // Merge default config with the provided config.\n        const layerConfig = {\n            ...defaultConfig,\n            ...config,\n        };\n\n        // Get the z-index for the new layer\n        const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;\n\n        // Create a unique ID for tracking this layer\n        const layerId = `nf-layer-manager-${currentIndex}`;\n\n        const overlayClickHandler = () => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer && layer.config.closeOnOverlayClick !== false) {\n                this.unmount(layer);\n            }\n        };\n\n        const closeFn = (resp?: unknown) => {\n            const layer = this.layers.find((l) => l.id === layerId);\n            if (layer) {\n                this.unmount(layer, resp);\n            }\n        };\n\n        // Return callback which will trigger the un-mount.\n        return [\n            (): ReactPortal | null => {\n                const [divElement, setDivElement] = React.useState<HTMLDivElement | null>(null);\n\n                useEffect(() => {\n                    // Create the div element only once when component mounts\n                    const div = document.createElement('div');\n                    div.setAttribute('id', layerId);\n                    document.body.appendChild(div);\n\n                    // Add layer to stack\n                    const currentLayer = {\n                        id: layerId,\n                        config: layerConfig,\n                        element: div,\n                    };\n                    this.layers.push(currentLayer);\n\n                    setDivElement(div);\n                    // Add entry animation class after a short delay\n                    setTimeout(() => {\n                        div.setAttribute('class', 'nf-layer-enter');\n                    }, 10);\n\n                    // Cleanup function - remove div when component unmounts\n                    return () => {\n                        if (document.body.contains(div)) {\n                            document.body.removeChild(div);\n                        }\n                        // Remove from layers array\n                        const index = this.layers.findIndex((layer) => layer.id === layerId);\n                        if (index !== -1) {\n                            this.layers.splice(index, 1);\n                        }\n                    };\n                }, []); // Empty dependency array - run only once\n\n                if (!divElement) {\n                    return null;\n                }\n\n                return ReactDOM.createPortal(\n                    <Container onClick={overlayClickHandler} zIndex={currentIndex} {...layerConfig}>\n                        {layerConfig.component}\n                    </Container>,\n                    divElement,\n                );\n            },\n            closeFn,\n        ];\n    };\n}\n\n// Return the instance of the class to create a Singleton.\nexport default new LayerManager();\n"]}

package/lib-esm/shared/constants.d.ts

@@ -25,3 +25,4 @@ declare const _default: {
     MODAL_SHADOW: string;
 };
 export default _default;
+//# sourceMappingURL=constants.d.ts.map

package/lib-esm/shared/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBA0BE"}

package/lib-esm/shared/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AAAA,eAAe;IACX,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,eAAe,EAAE,SAAS;IAC1B,cAAc,EAAE,WAAW;IAC3B,IAAI,EAAE,SAAS;IACf,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,KAAK,EAAE,SAAS;IAChB,aAAa,EAAE,iBAAiB;IAChC,kBAAkB,EAAE,SAAS;IAC7B,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAC9B,eAAe,EAAE,MAAM;IACvB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,mEAAmE;IAC3E,YAAY,EAAE,uEAAuE;IACrF,YAAY,EAAE,wGAAwG;CACzH,CAAA"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AAAA,eAAe;IACX,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,eAAe,EAAE,SAAS;IAC1B,cAAc,EAAE,WAAW;IAC3B,IAAI,EAAE,SAAS;IACf,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,KAAK,EAAE,SAAS;IAChB,aAAa,EAAE,iBAAiB;IAChC,kBAAkB,EAAE,SAAS;IAC7B,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAC9B,eAAe,EAAE,MAAM;IACvB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,mEAAmE;IAC3E,YAAY,EAAE,uEAAuE;IACrF,YAAY,EACR,wGAAwG;CAC/G,CAAC","sourcesContent":["export default {\n    PRIMARY: '#2283d2',\n    PRIMARY_LIGHT: '#64baff',\n    PRIMARY_LIGHTER: '#cfe9ff',\n    BACKDROP_COLOR: '#2681da80',\n    INFO: '#2283d2',\n    INFO_LIGHT: '#64baff',\n    SUCCESS: '#22d295',\n    SUCCESS_LIGHT: '#80eac6',\n    WARNING: '#cc9500',\n    WARNING_LIGHT: '#ffba00',\n    ERROR: '#d63b3b',\n    ERROR_LIGHT: '#f1a5a5',\n    BORDER_COLOR: '#555555',\n    TOAST: '#5f5f5f',\n    TOOLTIP_COLOR: 'rgba(0,0,0,0.5)',\n    BORDER_LIGHT_COLOR: '#eeeeee',\n    BACKGROUND: '#ffffff',\n    DISABLED_BACKGROUND: '#fafafa',\n    DISABLED_BORDER: '#aaa',\n    LIGHT_GREY: '#ccc',\n    DISABLED: '#777',\n    SHADOW: '0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)',\n    HOVER_SHADOW: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    MODAL_SHADOW:\n        '0px 8px 17px 2px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12), 0px 5px 5px -3px rgba(0,0,0,0.2)',\n};\n"]}

package/lib-esm/shared/styles.d.ts

@@ -14,3 +14,4 @@ export declare const Footer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/lib-esm/shared/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shared/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;SA0BrB,MAAO,WAAW;2GAtBjB,CAAC;AAEF,eAAO,MAAM,MAAM;;SAoBnB,MAAO,WAAW;yGAdjB,CAAC;AAEF,eAAO,MAAM,IAAI;;SAYjB,MAAO,WAAW;yGARjB,CAAC;AAEF,eAAO,MAAM,MAAM;;SAMnB,MAAO,WAAW;yGADjB,CAAC"}

package/lib-esm/shared/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shared/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;;CAIlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK/B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shared/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;;CAIlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK/B,CAAC","sourcesContent":["import styled from '@emotion/styled';\n\nexport const Ellipsis = styled.span`\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n`;\n\nexport const Header = styled.div`\n    padding: 10px 15px;\n    line-height: 26px;\n    border-bottom: 1px solid var(--border-light-color, #eeeeee);\n    font-size: 16px;\n    font-weight: bold;\n`;\n\nexport const Body = styled.div`\n    padding: 20px 15px;\n    flex: 1;\n    overflow: auto;\n`;\n\nexport const Footer = styled.div`\n    padding: 10px 15px;\n    border-top: 1px solid var(--border-light-color, #eeeeee);\n    display: flex;\n    justify-content: flex-end;\n`;\n"]}

package/package.json

@@ -1,77 +1,96 @@
 {
-  "name": "no-frills-ui",
-  "version": "0.0.14-alpha.1",
-  "description": "React components that are made of styled native components. Mostly!",
-  "main": "dist/index.js",
-  "module": "lib-esm/index.js",
-  "jsnext:main": "lib-esm/index.js",
-  "types": "lib-esm/index.d.ts",
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "lib-esm"
-  ],
-  "scripts": {
-    "clean": "shx rm -rf dist lib-esm",
-    "build": "tsc && rollup -c",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepare": "npm run clean && npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pushkar8723/no-frills-ui.git"
-  },
-  "keywords": [
-    "React"
-  ],
-  "author": "pushkar8723@gmail.com",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/pushkar8723/no-frills-ui/issues"
-  },
-  "homepage": "https://github.com/pushkar8723/no-frills-ui#readme",
-  "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^8.0.1",
-    "@storybook/addon-docs": "^10.0.2",
-    "@storybook/addon-links": "^10.0.2",
-    "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
-    "@storybook/cli": "^10.0.2",
-    "@storybook/react-webpack5": "^10.0.2",
-    "@swc/plugin-emotion": "^12.0.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "remark-gfm": "^4.0.1",
-    "rollup": "^4.52.5",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "shx": "^0.3.2",
-    "storybook": "^10.0.2",
-    "tslib": "^2.0.0",
-    "typescript": "^5.7.2"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "prop-types": "^15.7.2"
-  },
-  "bit": {
-    "env": {
-      "compiler": "bit.envs/compilers/react-typescript@3.1.53"
+    "name": "no-frills-ui",
+    "version": "0.0.14-alpha.3",
+    "description": "React components that are made of styled native components. Mostly!",
+    "main": "dist/index.js",
+    "module": "lib-esm/index.js",
+    "jsnext:main": "lib-esm/index.js",
+    "types": "lib-esm/index.d.ts",
+    "sideEffects": false,
+    "files": [
+        "dist",
+        "lib-esm"
+    ],
+    "scripts": {
+        "clean": "shx rm -rf dist lib-esm",
+        "build": "tsc && rollup -c",
+        "test": "echo \"Warning: No tests implemented yet\" && exit 0",
+        "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx",
+        "lint:fix": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --fix",
+        "format": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,html,json,md,mdx,yml,yaml}\"",
+        "format:check": "prettier --check \"**/*.{js,jsx,mjs,ts,tsx,html,json,md,mdx,yml,yaml}\"",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "prepare": "husky && npm run clean && npm run build"
     },
-    "componentsDefaultDirectory": "components/{name}",
-    "packageManager": "npm"
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/pushkar8723/no-frills-ui.git"
+    },
+    "keywords": [
+        "React"
+    ],
+    "author": "pushkar8723@gmail.com",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/pushkar8723/no-frills-ui/issues"
+    },
+    "homepage": "https://github.com/pushkar8723/no-frills-ui#readme",
+    "engines": {
+        "node": ">=20.0.0"
+    },
+    "peerDependencies": {
+        "@emotion/react": "^11.0.0",
+        "@emotion/styled": "^11.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "devDependencies": {
+        "@rollup/plugin-node-resolve": "^8.0.1",
+        "@storybook/addon-docs": "^10.0.2",
+        "@storybook/addon-links": "^10.0.2",
+        "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
+        "@storybook/cli": "^10.0.2",
+        "@storybook/react-webpack5": "^10.0.2",
+        "@swc/plugin-emotion": "^12.0.0",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@typescript-eslint/eslint-plugin": "^8",
+        "@typescript-eslint/parser": "^8",
+        "eslint": "^8",
+        "eslint-config-prettier": "^9",
+        "eslint-plugin-import": "^2",
+        "eslint-plugin-jsx-a11y": "^6",
+        "eslint-plugin-prettier": "^5",
+        "eslint-plugin-react": "^7",
+        "eslint-plugin-react-hooks": "^4",
+        "husky": "^9",
+        "lint-staged": "^15",
+        "prettier": "^3",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "remark-gfm": "^4.0.1",
+        "rollup": "^4.52.5",
+        "rollup-plugin-commonjs": "^10.1.0",
+        "rollup-plugin-node-resolve": "^5.2.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-typescript2": "^0.36.0",
+        "shx": "^0.3.2",
+        "storybook": "^10.0.2",
+        "tslib": "^2.0.0",
+        "typescript": "^5.7.2"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
+        "prop-types": "^15.7.2"
+    },
+    "bit": {
+        "env": {
+            "compiler": "bit.envs/compilers/react-typescript@3.1.53"
+        },
+        "componentsDefaultDirectory": "components/{name}",
+        "packageManager": "npm"
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }