@tsminh/spreacte 0.1.3

package/dist/cjs/index.js

@@ -0,0 +1 @@
+"use strict";var n=require("react/jsx-runtime"),e=require("react"),t=require("@fluejs/noscroll"),r=require("styled-components"),i=function(){return i=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},i.apply(this,arguments)};function o(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var a,c,s,l,u=e.createContext({ratio:1}),d=function(){return e.useContext(u)},p=["onClick","children","className","fwidth","safeAreaTop"],f=r.div(c||(c=o(["\n  background: rgba(0, 0, 0, 0.7);\n  width: var(--vw);\n  height: var(--vh);\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  transition: 0.5s ease all;\n  ","\n"],["\n  background: rgba(0, 0, 0, 0.7);\n  width: var(--vw);\n  height: var(--vh);\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  transition: 0.5s ease all;\n  ","\n"])),function(n){var e=n.$open;return r.css(a||(a=o(["\n    opacity: ",";\n    pointer-events: ",";\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n  "])),e?1:0,e?"all":"none")}),v=r.div(l||(l=o(["\n  width: var(--vw);\n  height: var(--vh);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: 0.2s ease all;\n  ","\n"],["\n  width: var(--vw);\n  height: var(--vh);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: 0.2s ease all;\n  ","\n"])),function(n){var e=n.$open;return r.css(s||(s=o(["\n    opacity: ",";\n    pointer-events: ",";\n    transform: translateY(","px) scale(",");\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n    transform: translateY(","px) scale(",");\n  "])),e?1:0,e?"all":"none",e?0:20,e?1:.9)});var h=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},numberWithCommas:function(n){void 0===n&&(n=0);var e=n.toString().split(".");return e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,"."),e.join(".")}});exports.Box=function(t){var r=d().ratio,o=e.useMemo(function(){return i({style:i(i(i(i(i(i({},Object.fromEntries(Object.entries(t).filter(function(n){var e=n[0];return!p.includes(e)&&"style"!==e}).map(function(n){var e,t=n[0],i=n[1];return[(e=t,["p","m"].includes(e[0])&&2===e.length?"".concat({p:"padding",m:"margin"}[e[0]]).concat({l:"Left",r:"Right",b:"Bottom",t:"Top"}[e[1]]):e),i*r]}))),t.img?{backgroundImage:"url(".concat(process.env.PUBLIC_URL,"/img/").concat(t.img,")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0),t.safeAreaTop?{top:"calc(var(--ot) + ".concat((t.top||0)*r,"px)")}:void 0),t.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:t.aspectRatio,pointerEvents:t.onClick||!t.img?"all":"none"}),t.style)},Object.fromEntries(Object.entries(t).filter(function(n){var e=n[0];return p.includes(e)}).map(function(n){return[n[0],n[1]]})))},[t,r]);return n.jsx("div",i({},o))},exports.GlobalContextProvider=function(t){var r=t.children,o=function(){var n=e.useState({width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/393}),t=n[0],r=n[1];return e.useEffect(function(){function n(){r({width:window.screen.availWidth,height:window.screen.availHeight,ratio:window.screen.availWidth/393})}return window.addEventListener("resize",n),n(),function(){return window.removeEventListener("resize",n)}},[]),t}().ratio,a=e.useMemo(function(){return{ratio:o}},[o]);return n.jsx(u.Provider,i({value:a},{children:r}))},exports.Modal=function(r){var o=r.open,a=r.children,c=e.useMemo(function(){return Math.floor(1e3*Math.random())},[]);return e.useEffect(function(){o?t.disablePageScroll():t.enablePageScroll()},[o]),n.jsxs(n.Fragment,{children:[n.jsx(f,{"data-mid":c,$open:o}),n.jsx(v,i({"data-mid":c,$open:o},{children:a}))]})},exports.useGlobalContext=d,exports.utils=h;

package/dist/esm/index.js

@@ -0,0 +1 @@
+import{jsx as n,jsxs as e,Fragment as t}from"react/jsx-runtime";import{useState as r,useEffect as i,createContext as o,useMemo as a,useContext as c}from"react";import{disablePageScroll as s,enablePageScroll as d}from"@fluejs/noscroll";import l,{css as u}from"styled-components";var p=function(){return p=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},p.apply(this,arguments)};function f(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var v,h,m,w,g=o({ratio:1}),y=function(e){var t=e.children,o=function(){var n=r({width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/393}),e=n[0],t=n[1];return i(function(){function n(){t({width:window.screen.availWidth,height:window.screen.availHeight,ratio:window.screen.availWidth/393})}return window.addEventListener("resize",n),n(),function(){return window.removeEventListener("resize",n)}},[]),e}().ratio,c=a(function(){return{ratio:o}},[o]);return n(g.Provider,p({value:c},{children:t}))},b=function(){return c(g)},x=["onClick","children","className","fwidth","safeAreaTop"],j=function(e){var t=b().ratio,r=a(function(){return p({style:p(p(p(p(p(p({},Object.fromEntries(Object.entries(e).filter(function(n){var e=n[0];return!x.includes(e)&&"style"!==e}).map(function(n){var e,r=n[0],i=n[1];return[(e=r,["p","m"].includes(e[0])&&2===e.length?"".concat({p:"padding",m:"margin"}[e[0]]).concat({l:"Left",r:"Right",b:"Bottom",t:"Top"}[e[1]]):e),i*t]}))),e.img?{backgroundImage:"url(".concat(process.env.PUBLIC_URL,"/img/").concat(e.img,")"),backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center"}:void 0),e.safeAreaTop?{top:"calc(var(--ot) + ".concat((e.top||0)*t,"px)")}:void 0),e.fwidth?{width:"var(--vw)"}:void 0),{aspectRatio:e.aspectRatio,pointerEvents:e.onClick||!e.img?"all":"none"}),e.style)},Object.fromEntries(Object.entries(e).filter(function(n){var e=n[0];return x.includes(e)}).map(function(n){return[n[0],n[1]]})))},[e,t]);return n("div",p({},r))},O=l.div(h||(h=f(["\n  background: rgba(0, 0, 0, 0.7);\n  width: var(--vw);\n  height: var(--vh);\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  transition: 0.5s ease all;\n  ","\n"],["\n  background: rgba(0, 0, 0, 0.7);\n  width: var(--vw);\n  height: var(--vh);\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 99;\n  transition: 0.5s ease all;\n  ","\n"])),function(n){var e=n.$open;return u(v||(v=f(["\n    opacity: ",";\n    pointer-events: ",";\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n  "])),e?1:0,e?"all":"none")}),z=l.div(w||(w=f(["\n  width: var(--vw);\n  height: var(--vh);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: 0.2s ease all;\n  ","\n"],["\n  width: var(--vw);\n  height: var(--vh);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: 0.2s ease all;\n  ","\n"])),function(n){var e=n.$open;return u(m||(m=f(["\n    opacity: ",";\n    pointer-events: ",";\n    transform: translateY(","px) scale(",");\n  "],["\n    opacity: ",";\n    pointer-events: ",";\n    transform: translateY(","px) scale(",");\n  "])),e?1:0,e?"all":"none",e?0:20,e?1:.9)}),E=function(r){var o=r.open,c=r.children,l=a(function(){return Math.floor(1e3*Math.random())},[]);return i(function(){o?s():d()},[o]),e(t,{children:[n(O,{"data-mid":l,$open:o}),n(z,p({"data-mid":l,$open:o},{children:c}))]})};var k=Object.freeze({__proto__:null,isDev:function(){return window.location.hostname.includes("localhost")},measureWindowSize:function(){document.documentElement.style.setProperty("--vw","".concat(window.innerWidth,"px")),document.documentElement.style.setProperty("--vh","".concat(window.innerHeight,"px"))},numberWithCommas:function(n){void 0===n&&(n=0);var e=n.toString().split(".");return e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,"."),e.join(".")}});export{j as Box,y as GlobalContextProvider,E as Modal,b as useGlobalContext,k as utils};

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode, CSSProperties } from 'react';
+
+interface BoxProps {
+    onClick?: () => void;
+    children?: ReactNode;
+    style?: CSSProperties;
+    width?: number;
+    height?: number;
+    mt?: number;
+    mb?: number;
+    ml?: number;
+    mr?: number;
+    pt?: number;
+    pb?: number;
+    pl?: number;
+    pr?: number;
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+    fontSize?: number;
+    img?: string;
+    aspectRatio?: number;
+    className?: string;
+    fwidth?: boolean;
+    safeAreaTop?: boolean;
+}
+declare const Box: React.FC<BoxProps>;
+
+interface IModal {
+    open?: boolean;
+    onClose?: () => void;
+}
+declare const Modal: React.FC<IModal & {
+    children?: ReactNode;
+}>;
+
+declare function numberWithCommas(x?: number): string;
+declare const isDev: () => boolean;
+declare const measureWindowSize: () => void;
+
+declare const utils_isDev: typeof isDev;
+declare const utils_measureWindowSize: typeof measureWindowSize;
+declare const utils_numberWithCommas: typeof numberWithCommas;
+declare namespace utils {
+  export {
+    utils_isDev as isDev,
+    utils_measureWindowSize as measureWindowSize,
+    utils_numberWithCommas as numberWithCommas,
+  };
+}
+
+declare const GlobalContextProvider: React.FC<{
+    children: ReactNode;
+}>;
+declare const useGlobalContext: () => {
+    ratio: number;
+};
+
+export { Box, GlobalContextProvider, Modal, useGlobalContext, utils };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@tsminh/spreacte",
+  "version": "0.1.3",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "@fluejs/noscroll": "^1.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-hot-toast": "^2.6.0",
+    "react-router-dom": "6",
+    "styled-components": "^6.1.19"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "rollup": "rollup -c --bundleConfigAsCjs"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.1.15",
+    "@types/react-dom": "^19.1.9",
+    "react-scripts": "5.0.1",
+    "rollup": "^4.57.1",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^4.9.5"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}