@rovula/ui 0.0.4 → 0.0.6

package/dist/components/Form/Form.js

@@ -0,0 +1,106 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/Form.tsx
+import { useState } from "react";
+import * as yup from "yup";
+var schema = yup.object().shape({
+    name: yup.string().required("Name is required"),
+    email: yup.string().email("Invalid email").required("Email is required"),
+    password: yup
+        .string()
+        .min(6, "Password must be at least 6 characters")
+        .required("Password is required"),
+});
+var Form = function (_a) {
+    var onSubmit = _a.onSubmit, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var _c = useState({
+        name: "",
+        email: "",
+        password: "",
+    }), values = _c[0], setValues = _c[1];
+    var _d = useState({}), errors = _d[0], setErrors = _d[1];
+    var handleChange = function (e) {
+        var _a;
+        var _b = e.target, name = _b.name, value = _b.value;
+        setValues(__assign(__assign({}, values), (_a = {}, _a[name] = value, _a)));
+    };
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_1, validationErrors_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, schema.validate(values, { abortEarly: false })];
+                case 2:
+                    _a.sent();
+                    setErrors({});
+                    onSubmit(values);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    if (err_1 instanceof yup.ValidationError) {
+                        validationErrors_1 = {};
+                        err_1.inner.forEach(function (error) {
+                            if (error.path) {
+                                validationErrors_1[error.path] = error.message;
+                            }
+                        });
+                        setErrors(validationErrors_1);
+                    }
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("form", { className: "form ".concat(className), onSubmit: handleSubmit, children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "name", children: "Name" }), _jsx("input", { id: "name", name: "name", type: "text", value: values.name, onChange: handleChange }), errors.name && _jsx("span", { className: "error", children: errors.name })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", name: "email", type: "email", value: values.email, onChange: handleChange }), errors.email && _jsx("span", { className: "error", children: errors.email })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "password", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", value: values.password, onChange: handleChange }), errors.password && _jsx("span", { className: "error", children: errors.password })] }), _jsx("button", { type: "submit", children: "Submit" })] }));
+};
+export default Form;

package/dist/components/Form/Text.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Text = function (_a) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.color, color = _c === void 0 ? "black" : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
+    return (_jsx("span", { className: "text ".concat(size, " ").concat(className), style: { color: color }, children: children }));
+};
+export default Text;

package/dist/components/Form/TextInput.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var TextInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
+    return (_jsx("input", { className: "text-input ".concat(className), type: type, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled }));
+};
+export default TextInput;

package/dist/components/Table/Table.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Table = function (_a) {
+    var columns = _a.columns, data = _a.data;
+    return (_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(function (column, index) { return (_jsx("th", { children: column.header }, index)); }) }) }), _jsx("tbody", { children: data.map(function (row, rowIndex) { return (_jsx("tr", { children: columns.map(function (column, colIndex) { return (_jsx("td", { children: row[column.accessor] }, colIndex)); }) }, rowIndex)); }) })] }));
+};
+export default Table;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+var Tabs = function (_a) {
+    var tabs = _a.tabs, _b = _a.initialTab, initialTab = _b === void 0 ? 0 : _b;
+    var _c = useState(initialTab), activeTab = _c[0], setActiveTab = _c[1];
+    return (_jsxs("div", { className: "tabs", children: [_jsx("div", { className: "tab-buttons", children: tabs.map(function (tab, index) { return (_jsx("button", { className: index === activeTab ? "active" : "", onClick: function () { return setActiveTab(index); }, children: tab.label }, index)); }) }), _jsx("div", { className: "tab-content", children: tabs[activeTab].content })] }));
+};
+export default Tabs;

package/dist/components/Text/Text.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Text = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "body1" : _b, _c = _a.tag, Tag = _c === void 0 ? "p" : _c, children = _a.children, className = _a.className, color = _a.color, style = _a.style;
+    return (_jsx(Tag, { className: "typography-".concat(variant, " text-").concat(color, " ").concat(className), style: style, children: children }));
+};
+export default Text;

package/dist/components/Text/Text.stories.js

@@ -0,0 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from "./Text";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+var meta = {
+    title: "Components/Text",
+    component: Text,
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+var variant = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "subtitile1",
+    "subtitile2",
+    "subtitile3",
+    "subtitile4",
+    "subtitile5",
+    "subtitile6",
+    "body1",
+    "body2",
+    "body3",
+    "body4",
+    "small1",
+    "small2",
+    "small3",
+    "label1",
+    "label2",
+];
+var color = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "success",
+    "info",
+    "warning",
+    "error",
+];
+export var Default = {
+    args: {},
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: variant.map(function (value) { return (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[200px]", children: _jsx(Text, { variant: value, color: "primary", children: value }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: value, color: "primary", children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, value)); }) }));
+    },
+};
+export var Color = {
+    args: {},
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: color.map(function (color, i) { return (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[400px]", children: _jsx(Text, { variant: variant === null || variant === void 0 ? void 0 : variant[i], color: color, children: color }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: variant === null || variant === void 0 ? void 0 : variant[i], color: color, children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, color)); }) }));
+    },
+};

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { helperTextVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, } from "./TextInput.styles";
+import { twMerge } from "tailwind-merge";
+import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
+var TextInput = forwardRef(function (_a, ref) {
+    var _b;
+    var id = _a.id, label = _a.label, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.rounded, rounded = _d === void 0 ? "normal" : _d, _e = _a.variant, variant = _e === void 0 ? "outline" : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, helperText = _a.helperText, errorMessage = _a.errorMessage, _g = _a.fullwidth, fullwidth = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.error, error = _j === void 0 ? false : _j, _k = _a.required, required = _k === void 0 ? true : _k, _l = _a.hasClearIcon, hasClearIcon = _l === void 0 ? true : _l, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon"]);
+    var inputRef = useRef(null);
+    var _id = id || "".concat(type, "-").concat(label, "-input");
+    var inputClassname = inputVariant({
+        size: size,
+        rounded: rounded,
+        variant: variant,
+        fullwidth: fullwidth,
+        disabled: disabled,
+        error: error,
+        hasClearIcon: hasClearIcon,
+    });
+    var labelClassname = labelVariant({
+        size: size,
+        disabled: disabled,
+        error: error,
+        isFloating: (_b = !!props.value) !== null && _b !== void 0 ? _b : false,
+    });
+    var helperTextClassname = helperTextVariant({ size: size, error: error, disabled: disabled });
+    var iconWrapperClassname = iconWrapperVariant({ size: size });
+    var iconClassname = iconVariant({ size: size });
+    useImperativeHandle(ref, function () { return ({
+        clearInput: handleClearInput,
+    }); });
+    var handleClearInput = function () {
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [_jsx("input", __assign({}, props, { ref: inputRef, type: type, id: _id, disabled: disabled, className: twMerge(inputClassname, props.className) })), hasClearIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), _jsxs("label", { htmlFor: _id, className: labelClassname, children: [label, " ", required && _jsx("span", { className: "text-error", children: "*" })] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
+});
+export default TextInput;

package/dist/components/TextInput/TextInput.stories.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TextInput from "./TextInput";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+var meta = {
+    title: "Components/TextInput",
+    component: TextInput,
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        label: "Lorem Ipsum",
+        // value: "Lorem Ipsum",
+        fullwidth: true,
+    },
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, __assign({ id: "1", placeholder: "placeholder", size: "lg" }, args)), _jsx(TextInput, __assign({ id: "2", placeholder: "placeholder", size: "md" }, args)), _jsx(TextInput, __assign({ id: "3", placeholder: "placeholder", size: "sm" }, args))] }));
+    },
+};

package/dist/components/TextInput/TextInput.styles.js

@@ -0,0 +1,155 @@
+import { cva } from "class-variance-authority";
+export var inputVariant = cva([
+    "border-0 outline-none",
+    "p-1 flex",
+    "peer text-black placeholder:text-transparent",
+], {
+    variants: {
+        size: {
+            sm: "p-2 px-3 typography-small1",
+            md: "py-2 px-3 typography-subtitile4",
+            lg: "p-4 typography-subtitile1",
+        },
+        rounded: {
+            none: "rounded-none",
+            normal: "rounded-xl",
+            full: "rounded-full",
+        },
+        variant: {
+            flat: "",
+            outline: "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-2 focus:ring-inset focus:ring-input-active",
+            underline: "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+        },
+        fullwidth: {
+            true: "w-full",
+        },
+        disabled: {
+            true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+        },
+        error: {
+            true: "ring-error",
+        },
+        hasClearIcon: {
+            true: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "underline",
+            className: "rounded-none",
+        },
+        {
+            hasClearIcon: true,
+            size: "sm",
+            class: "focus:pe-6",
+        },
+        {
+            hasClearIcon: true,
+            size: "md",
+            class: "focus:pe-8",
+        },
+        {
+            hasClearIcon: true,
+            size: "lg",
+            class: "focus:pe-10",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        variant: "outline",
+        rounded: "normal",
+        fullwidth: false,
+        disabled: false,
+        error: false,
+        hasClearIcon: false,
+    },
+});
+export var labelVariant = cva([
+    "absolute block transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+], {
+    variants: {
+        size: {
+            sm: [
+                "left-3 top-2 typography-small1 peer-focus:-top-1.5 peer-focus:typography-label2",
+                "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label2",
+            ],
+            md: [
+                "left-3 top-2 typography-subtitile4 peer-focus:-top-1.5 peer-focus:typography-label1",
+                "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+            ],
+            lg: [
+                "left-4 top-4 typography-subtitile1 peer-focus:-top-1.5 peer-focus:typography-label1",
+                "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+            ],
+        },
+        disabled: {
+            true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+        },
+        error: {
+            true: "ring-error",
+        },
+        isFloating: {
+            true: "-top-1.5 typography-label1 bg-input-label-background",
+        },
+    },
+    compoundVariants: [
+        {
+            size: "sm",
+            isFloating: true,
+            class: "-top-1.5 typography-label2 bg-input-label-background",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        disabled: false,
+        error: false,
+        isFloating: false,
+    },
+});
+export var helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
+    variants: {
+        size: {
+            sm: "mt-1",
+            md: "mt-[6px]",
+            lg: "mt-[6px]",
+        },
+        disabled: {
+            true: "text-input-text-disabled",
+        },
+        error: {
+            true: "text-error",
+            false: "text-input-text",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        disabled: false,
+        error: false,
+    },
+});
+export var iconWrapperVariant = cva([
+    "absolute inset-y-0 right-0 items-center justify-center hidden peer-focus:flex",
+], {
+    variants: {
+        size: {
+            sm: "mr-2",
+            md: "mr-3",
+            lg: "mr-4",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+export var iconVariant = cva(["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"], {
+    variants: {
+        size: {
+            sm: "size-3",
+            md: "size-4",
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});