react-better-html 1.1.4 → 1.1.6

package/dist/components/Div.d.ts

@@ -1,6 +1,26 @@
-type DivProps = {
-    children?: React.ReactNode;
+import { ComponentStyle } from "../types/components";
+import { OmitProps } from "../types/app";
+type DivProps<Value> = {
+    value?: Value;
+    as?: keyof JSX.IntrinsicElements;
+    isTabAccessed?: boolean;
+    onClickWithValue?: (value: Value) => void;
+} & OmitProps<React.ComponentProps<"div">, "style"> & ComponentStyle;
+type DivComponent = {
+    <Value>(props: DivProps<Value> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }): React.ReactElement;
+    row: <Value>(props: DivProps<Value> & {
+        ref?: React.Ref<HTMLDivElement>;
+        invertFlexDirection?: boolean;
+    }) => React.ReactElement;
+    column: <Value>(props: DivProps<Value> & {
+        ref?: React.Ref<HTMLDivElement>;
+        invertFlexDirection?: boolean;
+    }) => React.ReactElement;
+    grid: <Value>(props: DivProps<Value> & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.ReactElement;
 };
-declare function Div({ children }: DivProps): import("react").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof Div>;
+declare const _default: import("react").MemoExoticComponent<DivComponent>;
 export default _default;

package/dist/components/Div.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const hooks_1 = require("../utils/hooks");
+const DivElement = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
+}) `
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const Div = (0, react_1.forwardRef)(function Div({ value, as, isTabAccessed, onClickWithValue, role, onClick, onKeyDown, ...props }, ref) {
+    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props);
+    const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
+    const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
+    const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
+    const onClickElement = (0, react_1.useCallback)((event) => {
+        onClick?.(event);
+        onClickWithValue?.(value);
+    }, [onClick, onClickWithValue, value]);
+    const onKeyDownElement = (0, react_1.useCallback)((event) => {
+        onKeyDown?.(event);
+        if (!isTabAccessed)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, [onKeyDown, isTabAccessed]);
+    return ((0, jsx_runtime_1.jsx)(DivElement, { as: as, tabIndex: isTabAccessed && !constants_1.isMobileDevice ? 0 : undefined, role: role ?? (onClick ? "button" : undefined), onClick: onClickElement, onKeyDown: onKeyDownElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }));
+});
+exports.default = (0, react_1.memo)(Div);

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const isMobileDevice: boolean;

package/dist/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMobileDevice = void 0;
+exports.isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

package/dist/index.js

@@ -1,2 +1,8 @@
-(()=>{"use strict";var e={474:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0});var o=t(953);r.default=(0,o.memo)((function(e){var r=e.children;return React.createElement("div",null,r)}))},124:function(e,r,t){var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(r,"__esModule",{value:!0}),r.Div=void 0;var u=o(t(474));r.Div=u.default},953:e=>{e.exports=require("react")}},r={},t=function t(o){var u=r[o];if(void 0!==u)return u.exports;var i=r[o]={exports:{}};return e[o].call(i.exports,i,i.exports,t),i.exports}(124);module.exports=t})();
-//# sourceMappingURL=index.js.map
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Div = void 0;
+const Div_1 = __importDefault(require("./components/Div"));
+exports.Div = Div_1.default;

package/dist/types/app.d.ts

@@ -0,0 +1,14 @@
+/** Removes the given props from type */
+export type OmitProps<T, K extends keyof T> = Omit<T, K>;
+/** Removes the given options from type */
+export type ExcludeOptions<T, K extends T> = Exclude<T, K>;
+/** Picks only the selected values */
+export type PickValue<T, K extends T> = K;
+/** Makes all object props optional (On the root) */
+export type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
+/** Makes all object props optional (On the root and nested) */
+export type DeepPartialRecord<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartialRecord<T[K]> : T[K];
+};
+/** returns only the required props */
+export type PickAllRequired<T, K extends keyof T> = Required<Pick<T, K>>;

package/dist/types/app.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/asset.d.ts

@@ -0,0 +1,2 @@
+export type AssetsConfig = Record<AssetName, string>;
+export type AssetName = "";

package/dist/types/asset.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/components.d.ts

@@ -0,0 +1,22 @@
+export type ComponentStyle = React.CSSProperties;
+export type ComponentHoverStyle = {
+    [CSSProperty in keyof ComponentStyle as `${CSSProperty & string}Hover`]: ComponentStyle[CSSProperty];
+};
+export type ComponentMarginProps = {
+    margin?: ComponentStyle["margin"];
+    marginTop?: ComponentStyle["marginTop"];
+    marginBottom?: ComponentStyle["marginBottom"];
+    marginLeft?: ComponentStyle["marginLeft"];
+    marginRight?: ComponentStyle["marginRight"];
+    marginBlock?: ComponentStyle["marginBlock"];
+    marginInline?: ComponentStyle["marginInline"];
+};
+export type ComponentPaddingProps = {
+    padding?: ComponentStyle["padding"];
+    paddingTop?: ComponentStyle["paddingTop"];
+    paddingBottom?: ComponentStyle["paddingBottom"];
+    paddingLeft?: ComponentStyle["paddingLeft"];
+    paddingRight?: ComponentStyle["paddingRight"];
+    paddingBlock?: ComponentStyle["paddingBlock"];
+    paddingInline?: ComponentStyle["paddingInline"];
+};

package/dist/types/components.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/icon.d.ts

@@ -0,0 +1,8 @@
+export type IconsConfig = Record<IconName, {
+    width: number;
+    height: number;
+    paths: (React.ComponentProps<"path"> & {
+        type: "fill" | "stroke";
+    })[];
+}>;
+export type IconName = "";

package/dist/types/icon.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/loader.d.ts

@@ -0,0 +1 @@
+export type LoaderName = "";

package/dist/types/loader.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/theme.d.ts

@@ -0,0 +1,19 @@
+export type Styles = {
+    sideSpace: number;
+    borderRadius: number;
+    borderRadiusSmall?: number;
+    gap: number;
+    fontSize?: number;
+    fontFamily: string;
+    transition: string;
+};
+export type Color = `#${string}` | "transparent";
+export type Colors = Record<"textPrimary" | "textSecondary" | "brand" | "brandSecondary" | "success" | "info" | "warn" | "error" | "errorSecondary" | "backgroundBase" | "backgroundSecondary" | "backgroundTertiary" | "border", Color>;
+export type Theme = {
+    styles: Styles;
+    colors: Colors;
+};
+export type PartialTheme = {
+    styles?: Partial<Styles>;
+    colors?: Partial<Colors>;
+};

package/dist/types/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/functions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/hooks.d.ts

@@ -0,0 +1,8 @@
+import { ComponentHoverStyle, ComponentStyle } from "../types/components";
+import { Theme } from "../types/theme";
+export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme): {
+    normalStyle: ComponentStyle;
+    hoverStyle: ComponentStyle;
+};
+export declare function useComponentPropsWithPrefix<Props extends Record<string, any>, Prefix extends string>(props: Props, prefix: Prefix): Record<`${Prefix}-${string}`, any>;
+export declare function useComponentPropsWithoutStyle<Props extends Record<string, any>>(props: Props): Partial<Props>;

package/dist/utils/hooks.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyledComponentStyles = useStyledComponentStyles;
+exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
+exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
+const react_1 = require("react");
+const cssProps = Object.keys(document.documentElement.style).reduce((previousValue, currentValue) => {
+    previousValue[currentValue] = true;
+    return previousValue;
+}, {});
+function useStyledComponentStyles(props, theme) {
+    const styles = (0, react_1.useMemo)(() => {
+        const normalStyle = {};
+        const hoverStyle = {};
+        let haveHover = false;
+        for (const key in props) {
+            if (key.endsWith("Hover")) {
+                haveHover = true;
+                const normalKey = key.slice(0, -5);
+                hoverStyle[normalKey] = props[key];
+            }
+            else {
+                if (key.startsWith("data-") || key.startsWith("aria-"))
+                    continue;
+                normalStyle[key] = props[key];
+            }
+        }
+        if (haveHover)
+            normalStyle.transition = theme?.styles.transition ?? "";
+        return {
+            normalStyle,
+            hoverStyle,
+        };
+    }, [props, theme]);
+    return styles;
+}
+function useComponentPropsWithPrefix(props, prefix) {
+    return (0, react_1.useMemo)(() => {
+        const returnValue = {};
+        for (const key in props) {
+            if (key.startsWith(`${prefix}-`)) {
+                returnValue[key] = props[key];
+            }
+        }
+        return returnValue;
+    }, [props, prefix]);
+}
+function useComponentPropsWithoutStyle(props) {
+    return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
+        if (!cssProps[currentValue])
+            previousValue[currentValue] = props[currentValue];
+        return previousValue;
+    }, {}), [props]);
+}

package/dist/utils/logger.d.ts

@@ -0,0 +1,41 @@
+type TextColor = keyof typeof textColors;
+type BackgroundColor = keyof typeof backgroundColors;
+type Options = {
+    color?: TextColor;
+    backgroundColor?: BackgroundColor;
+    bold?: boolean;
+};
+declare const textColors: {
+    black: string;
+    red: string;
+    green: string;
+    yellow: string;
+    blue: string;
+    magenta: string;
+    cyan: string;
+    white: string;
+};
+declare const backgroundColors: {
+    black: string;
+    red: string;
+    green: string;
+    yellow: string;
+    blue: string;
+    magenta: string;
+    cyan: string;
+    white: string;
+};
+export declare const log: {
+    /** @description Default log function */
+    log: (text?: string, options?: Options) => void;
+    /** @description Logs the value in pretty json format */
+    json: (jsonObject?: any, options?: Options) => void;
+    /** @description Logs a -=-= pattern */
+    divider: (color?: TextColor) => void;
+    trace: () => void;
+    success: (text?: string, bold?: boolean) => void;
+    info: (text?: string, bold?: boolean) => void;
+    warn: (text?: string, bold?: boolean) => void;
+    error: (text?: string, bold?: boolean) => void;
+};
+export {};

package/dist/utils/logger.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.log = void 0;
+const textColors = {
+    black: "#111111",
+    red: "#f83e4b",
+    green: "#5ac53a",
+    yellow: "#f8d770",
+    blue: "#3d6fdf",
+    magenta: "#9648eb",
+    cyan: "#53b2c8",
+    white: "#f8f8f8",
+};
+const backgroundColors = {
+    black: "#111111",
+    red: "#f83e4b",
+    green: "#5ac53a",
+    yellow: "#f8d770",
+    blue: "#3d6fdf",
+    magenta: "#9648eb",
+    cyan: "#53b2c8",
+    white: "#f8f8f8",
+};
+const logTypes = {
+    info: "cyan",
+    success: "green",
+    warn: "yellow",
+    error: "red",
+};
+function getCssString(options) {
+    const color = options.color ? textColors[options.color] : undefined;
+    const backgroundColor = options.backgroundColor ? backgroundColors[options.backgroundColor] : undefined;
+    const fontWeight = options.bold ? "bold" : "normal";
+    return `${color ? `color: ${color};` : ""}${backgroundColor ? `background-color: ${backgroundColor};` : ""}${fontWeight ? `font-weight: ${fontWeight};` : ""}`;
+}
+function logText(text, options) {
+    console.log(`%c${text}`, getCssString(options ?? {}));
+}
+exports.log = {
+    ...Object.entries(logTypes).reduce((previousValue, [logType, color]) => {
+        previousValue[logType] = (text = "", bold) => {
+            logText(text, {
+                color,
+                bold,
+            });
+        };
+        return previousValue;
+    }, {}),
+    /** @description Default log function */
+    log: (text, options) => {
+        logText(text, options);
+    },
+    /** @description Logs the value in pretty json format */
+    json: (jsonObject, options) => {
+        logText(`\n${JSON.stringify(jsonObject, null, 4)}`, options);
+    },
+    /** @description Logs a -=-= pattern */
+    divider: (color) => {
+        logText("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-", {
+            color,
+        });
+    },
+    trace: () => {
+        console.trace();
+    },
+};

package/package.json

@@ -1,9 +1,8 @@
 {
    "name": "react-better-html",
-   "version": "1.1.4",
+   "version": "1.1.6",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
-   "types": "dist/index.d.ts",
    "files": [
       "dist"
    ],
@@ -24,7 +23,7 @@
    "scripts": {
       "clean": "rimraf dist",
       "prebuild": "npm run clean",
-      "build": "webpack --config webpack.config.js",
+      "build": "tsc",
       "predeploy": "npm run build",
       "deploy": "npm publish"
    },
@@ -36,26 +35,15 @@
    ],
    "author": "Kristiyan Valchev (kriss.vv)",
    "license": "ISC",
+   "dependencies": {
+      "rimraf": "^6.0.1"
+   },
    "devDependencies": {
-      "@babel/cli": "^7.24.8",
-      "@babel/core": "^7.24.8",
-      "@babel/preset-env": "^7.24.8",
-      "@babel/preset-react": "^7.24.7",
-      "@babel/preset-typescript": "^7.24.7",
       "@types/react": "^18.3.3",
-      "@types/react-dom": "^18.3.0",
-      "babel-loader": "^9.1.3",
-      "react": "^18.0.0",
-      "react-dom": "^18.0.0",
-      "rimraf": "^6.0.1",
-      "ts-loader": "^9.5.1",
-      "typescript": "^5.5.3",
-      "webpack": "^5.93.0",
-      "webpack-cli": "^5.1.4",
-      "webpack-node-externals": "^3.0.0"
+      "typescript": "^5.5.3"
    },
    "peerDependencies": {
       "react": "^18.0.0",
-      "react-dom": "^18.0.0"
+      "styled-components": "^6.1.15"
    }
 }

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","mappings":"wCACAA,OAAOC,eAAeC,EAAS,aAAc,CAAEC,OAAO,IACtD,IAAMC,EAAUC,EAAQ,KAIxBH,EAAAA,SAAkB,EAAIE,EAAQE,OAH9B,SAAYC,GAAe,IAAZC,EAAQD,EAARC,SACX,OAAOC,MAAAC,cAAA,WAAMF,EACjB,G,sBCJA,IAAIG,EAAmBC,MAAQA,KAAKD,iBAAoB,SAAUE,GAC9D,OAAQA,GAAOA,EAAIC,WAAcD,EAAM,CAAE,QAAWA,EACxD,EACAb,OAAOC,eAAeC,EAAS,aAAc,CAAEC,OAAO,IACtDD,EAAQa,SAAM,EACd,IAAMC,EAAQL,EAAgBN,EAAQ,MACtCH,EAAQa,IAAMC,EAAK,O,UCPnBC,EAAOf,QAAUG,QAAQ,Q,GCCrBa,EAA2B,CAAC,ECE5BC,EDCJ,SAASC,EAAoBC,GAE5B,IAAIC,EAAeJ,EAAyBG,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAapB,QAGrB,IAAIe,EAASC,EAAyBG,GAAY,CAGjDnB,QAAS,CAAC,GAOX,OAHAsB,EAAoBH,GAAUI,KAAKR,EAAOf,QAASe,EAAQA,EAAOf,QAASkB,GAGpEH,EAAOf,OACf,CCnB0BkB,CAAoB,K","sources":["webpack://react-better-html/./src/components/Div.tsx","webpack://react-better-html/./src/index.ts","webpack://react-better-html/external commonjs2 \"react\"","webpack://react-better-html/webpack/bootstrap","webpack://react-better-html/webpack/startup"],"sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst react_1 = require(\"react\");\nfunction Div({ children }) {\n    return <div>{children}</div>;\n}\nexports.default = (0, react_1.memo)(Div);\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Div = void 0;\nconst Div_1 = __importDefault(require(\"./components/Div\"));\nexports.Div = Div_1.default;\n","module.exports = require(\"react\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(124);\n"],"names":["Object","defineProperty","exports","value","react_1","require","memo","_ref","children","React","createElement","__importDefault","this","mod","__esModule","Div","Div_1","module","__webpack_module_cache__","__webpack_exports__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","call"],"sourceRoot":""}