@koine/react 2.0.0-alpha.4 → 2.0.0-beta.10

package/helpers/classed.js

@@ -1,55 +1,41 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.classed = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    classed: function() {
+        return classed;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function classed(component) {
     // @ts-expect-error nevermind for now...
-    var type = component.type || component;
-    return function (strings) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
-        var WrappedComponent = (0, react_1.forwardRef)(function (props, ref) {
-            var _a;
-            var argResolved = args
-                .map(function (arg, index) {
-                var result = "";
+    const type = component.type || component;
+    return function(strings, ...args) {
+        const WrappedComponent = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
+            const argResolved = args.map((arg, index)=>{
+                let result = "";
                 if (typeof arg === "function") {
                     result = arg(props);
-                }
-                else if (typeof arg !== "undefined") {
+                } else if (typeof arg !== "undefined") {
                     result = arg.toString();
                 }
                 return strings[index] + result;
-            })
-                .join("");
-            var isNativeHtmlElement = typeof type === "string";
-            var propsToForward = isNativeHtmlElement
-                ? {}
-                : props;
+            }).join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement ? {} : props;
             if (isNativeHtmlElement) {
-                for (var key in props) {
+                for(const key in props){
                     // like styled-components `transient` props
                     if (!key.startsWith("$")) {
                         // FIXME: for react 18 we need: @ts-expect-error
@@ -58,21 +44,23 @@ function classed(component) {
                 }
             }
             // get the tagged function string outcome
-            var className = argResolved || strings[0];
+            let className = argResolved || strings[0];
             // check if we need to clean it or not from the optional structure `< class="..."`
-            className = ((_a = className.match(/class="([^"]*)/)) === null || _a === void 0 ? void 0 : _a[1]) || className;
+            className = className.match(/class="([^"]*)/)?.[1] || className;
             // add the custom classes from props
-            className += (props === null || props === void 0 ? void 0 : props.className) ? " " + (props === null || props === void 0 ? void 0 : props.className) : "";
-            return (0, react_1.createElement)(type, tslib_1.__assign(tslib_1.__assign({}, propsToForward), { 
+            className += props?.className ? " " + props?.className : "";
+            return /*#__PURE__*/ (0, _react.createElement)(type, {
+                // ...props,
+                ...propsToForward,
                 // only add ot props if it is not an empty string
-                className: className || undefined, 
+                className: className || undefined,
                 // add ref to props
-                ref: ref }));
+                ref
+            });
         });
         // FIXME: not sure if this is needed
         // WrappedComponent.displayName = type.toString();
         return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
     };
 }
-exports.classed = classed;
-exports.default = classed;
+const _default = classed;

package/helpers/classed.mjs

@@ -1,5 +1,4 @@
-import { __assign } from "tslib";
-import { createElement, forwardRef } from "react";
+import React, { createElement, forwardRef } from "react";
 /**
  * This utility allows to extend a component a là `styled-components` but for
  * a className based styling solution like Tailwind,
@@ -18,35 +17,24 @@ import { createElement, forwardRef } from "react";
  *
  * Discussions and Q/A:
  * - https://stackoverflow.com/q/73055695/1938970
- */
-export function classed(component) {
+ */ export function classed(component) {
     // @ts-expect-error nevermind for now...
-    var type = component.type || component;
-    return function (strings) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
-        var WrappedComponent = forwardRef(function (props, ref) {
-            var _a;
-            var argResolved = args
-                .map(function (arg, index) {
-                var result = "";
+    const type = component.type || component;
+    return function(strings, ...args) {
+        const WrappedComponent = /*#__PURE__*/ forwardRef(function(props, ref) {
+            const argResolved = args.map((arg, index)=>{
+                let result = "";
                 if (typeof arg === "function") {
                     result = arg(props);
-                }
-                else if (typeof arg !== "undefined") {
+                } else if (typeof arg !== "undefined") {
                     result = arg.toString();
                 }
                 return strings[index] + result;
-            })
-                .join("");
-            var isNativeHtmlElement = typeof type === "string";
-            var propsToForward = isNativeHtmlElement
-                ? {}
-                : props;
+            }).join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement ? {} : props;
             if (isNativeHtmlElement) {
-                for (var key in props) {
+                for(const key in props){
                     // like styled-components `transient` props
                     if (!key.startsWith("$")) {
                         // FIXME: for react 18 we need: @ts-expect-error
@@ -55,16 +43,19 @@ export function classed(component) {
                 }
             }
             // get the tagged function string outcome
-            var className = argResolved || strings[0];
+            let className = argResolved || strings[0];
             // check if we need to clean it or not from the optional structure `< class="..."`
-            className = ((_a = className.match(/class="([^"]*)/)) === null || _a === void 0 ? void 0 : _a[1]) || className;
+            className = className.match(/class="([^"]*)/)?.[1] || className;
             // add the custom classes from props
-            className += (props === null || props === void 0 ? void 0 : props.className) ? " " + (props === null || props === void 0 ? void 0 : props.className) : "";
-            return createElement(type, __assign(__assign({}, propsToForward), { 
+            className += props?.className ? " " + props?.className : "";
+            return /*#__PURE__*/ createElement(type, {
+                // ...props,
+                ...propsToForward,
                 // only add ot props if it is not an empty string
-                className: className || undefined, 
+                className: className || undefined,
                 // add ref to props
-                ref: ref }));
+                ref
+            });
         });
         // FIXME: not sure if this is needed
         // WrappedComponent.displayName = type.toString();

package/helpers/classed.stories.js

@@ -0,0 +1,140 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    Playground: function() {
+        return Playground;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _classed = require("./classed");
+const Classed = (0, _classed.classed)("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
+/**
+ * Adapted (removed `classnames` dependency) from:
+ * @see https://daily.dev/blog/my-tailwind-css-utility-function-for-creating-reusable-react-components-typescript-support
+ *
+ * See also [classname-hoc](https://www.npmjs.com/package/classname-hoc)
+ */ function classedOriginal(type, ...className) {
+    return function(props) {
+        return /*#__PURE__*/ (0, _react.createElement)(type, {
+            ...props,
+            className: [
+                props?.className || ""
+            ].concat(className).join(" ")
+        });
+    };
+}
+const ClassedOriginal = classedOriginal("div", "bg-slate-800");
+function classedBind(props) {
+    // @ts-expect-error no time now
+    const classNameImpl = props.className ? " " + props.className : "";
+    // return <this className={this.props.className + classNameImpl} {...props} />;
+    return /*#__PURE__*/ (0, _react.createElement)(this.props.as || this.type, {
+        ...props,
+        className: this.props.className + classNameImpl
+    }, // @ts-expect-error no time now
+    props.children);
+}
+const ClassedBind = classedBind.bind(/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+    as: "h2",
+    className: "bg-slate-800"
+}));
+function classedDynamic(ComponentFn) {
+    return function(propsImplementation) {
+        const { props, type } = ComponentFn(propsImplementation);
+        const classNameDefault = props.className ? " " + props.className : "";
+        return /*#__PURE__*/ (0, _react.createElement)(props.as || type, {
+            ...props,
+            ...propsImplementation,
+            className: propsImplementation?.className + classNameDefault
+        });
+    };
+}
+const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        as: "h2",
+        className: "bg-slate-800"
+    }));
+const ClassedDynamicUsingProps = classedDynamic((p)=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        as: "h2",
+        className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
+    });
+});
+// type ExtractComponent<ComponentString extends string> =
+//   ComponentString extends `<${infer ComponentName} class="${infer ClassNames}`
+//     ? { name: ComponentName; className: ClassNames }
+//     : { error: "Cannot parse Component string" };
+// type ExtractedComponent<T extends string> = ExtractComponent<T>;
+function classedTaggedStatic(value = "") {
+    // @ts-expect-error we rely on correct implementation and assume it always matches
+    const componentName = value.match(/<(.*?)\s/)[1];
+    // @ts-expect-error we rely on correct implementation and assume it always matches
+    const classDefault = value.match(/class="(.+)/)[1];
+    return function(props) {
+        // @ts-expect-error no time now
+        const classCustom = props?.className ? " " + props?.className : "";
+        return /*#__PURE__*/ (0, _react.createElement)(componentName, {
+            ...props,
+            className: classDefault + classCustom
+        });
+    }; /*  as Component; */ 
+}
+const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
+const _default = {
+    // component: KoineDialog,
+    title: "Helpers/classed"
+};
+const Template = (args)=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
+                className: "text-yellow-200",
+                test: "0a",
+                children: "Classed taller"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
+                className: "text-yellow-200",
+                test: "0b",
+                children: "Classed wider"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedOriginal, {
+                className: "text-white",
+                children: "ClassedOriginal"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedBind, {
+                className: "text-white",
+                children: "ClassedBind"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicIgnoringProps, {
+                className: "text-gray-300",
+                test: "2",
+                children: "ClassedDynamicIgnoringProps"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicUsingProps, {
+                className: "text-gray-600",
+                test: "3",
+                children: "ClassedDynamicUsingProps"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedTaggedStatic, {
+                className: "text-gray-600",
+                children: "ClassedTaggedStatic"
+            })
+        ]
+    });
+};
+const Playground = Template.bind({});
+Playground.args = {};

package/helpers/classed.stories.mjs

@@ -0,0 +1,121 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createElement } from "react";
+import { classed } from "./classed";
+const Classed = classed("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
+/**
+ * Adapted (removed `classnames` dependency) from:
+ * @see https://daily.dev/blog/my-tailwind-css-utility-function-for-creating-reusable-react-components-typescript-support
+ *
+ * See also [classname-hoc](https://www.npmjs.com/package/classname-hoc)
+ */ function classedOriginal(type, ...className) {
+    return function(props) {
+        return /*#__PURE__*/ createElement(type, {
+            ...props,
+            className: [
+                props?.className || ""
+            ].concat(className).join(" ")
+        });
+    };
+}
+const ClassedOriginal = classedOriginal("div", "bg-slate-800");
+function classedBind(props) {
+    // @ts-expect-error no time now
+    const classNameImpl = props.className ? " " + props.className : "";
+    // return <this className={this.props.className + classNameImpl} {...props} />;
+    return /*#__PURE__*/ createElement(this.props.as || this.type, {
+        ...props,
+        className: this.props.className + classNameImpl
+    }, // @ts-expect-error no time now
+    props.children);
+}
+const ClassedBind = classedBind.bind(/*#__PURE__*/ _jsx("div", {
+    as: "h2",
+    className: "bg-slate-800"
+}));
+function classedDynamic(ComponentFn) {
+    return function(propsImplementation) {
+        const { props, type } = ComponentFn(propsImplementation);
+        const classNameDefault = props.className ? " " + props.className : "";
+        return /*#__PURE__*/ createElement(props.as || type, {
+            ...props,
+            ...propsImplementation,
+            className: propsImplementation?.className + classNameDefault
+        });
+    };
+}
+const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _jsx("div", {
+        as: "h2",
+        className: "bg-slate-800"
+    }));
+const ClassedDynamicUsingProps = classedDynamic((p)=>{
+    return /*#__PURE__*/ _jsx("div", {
+        as: "h2",
+        className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
+    });
+});
+// type ExtractComponent<ComponentString extends string> =
+//   ComponentString extends `<${infer ComponentName} class="${infer ClassNames}`
+//     ? { name: ComponentName; className: ClassNames }
+//     : { error: "Cannot parse Component string" };
+// type ExtractedComponent<T extends string> = ExtractComponent<T>;
+function classedTaggedStatic(value = "") {
+    // @ts-expect-error we rely on correct implementation and assume it always matches
+    const componentName = value.match(/<(.*?)\s/)[1];
+    // @ts-expect-error we rely on correct implementation and assume it always matches
+    const classDefault = value.match(/class="(.+)/)[1];
+    return function(props) {
+        // @ts-expect-error no time now
+        const classCustom = props?.className ? " " + props?.className : "";
+        return /*#__PURE__*/ createElement(componentName, {
+            ...props,
+            className: classDefault + classCustom
+        });
+    }; /*  as Component; */ 
+}
+const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
+export default {
+    // component: KoineDialog,
+    title: "Helpers/classed"
+};
+const Template = (args)=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Classed, {
+                className: "text-yellow-200",
+                test: "0a",
+                children: "Classed taller"
+            }),
+            /*#__PURE__*/ _jsx(Classed, {
+                className: "text-yellow-200",
+                test: "0b",
+                children: "Classed wider"
+            }),
+            /*#__PURE__*/ _jsx(ClassedOriginal, {
+                className: "text-white",
+                children: "ClassedOriginal"
+            }),
+            /*#__PURE__*/ _jsx(ClassedBind, {
+                className: "text-white",
+                children: "ClassedBind"
+            }),
+            /*#__PURE__*/ _jsx(ClassedDynamicIgnoringProps, {
+                className: "text-gray-300",
+                test: "2",
+                children: "ClassedDynamicIgnoringProps"
+            }),
+            /*#__PURE__*/ _jsx(ClassedDynamicUsingProps, {
+                className: "text-gray-600",
+                test: "3",
+                children: "ClassedDynamicUsingProps"
+            }),
+            /*#__PURE__*/ _jsx(ClassedTaggedStatic, {
+                className: "text-gray-600",
+                children: "ClassedTaggedStatic"
+            })
+        ]
+    });
+};
+export const Playground = Template.bind({});
+Playground.args = {};