@rovula/ui 0.0.4 → 0.0.5

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,90 @@
+import { cva } from "class-variance-authority";
+export var buttonCva = cva([
+    // "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
+    // "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
+    // "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+    "gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]",
+], {
+    variants: {
+        color: {
+            primary: "bg-primary border-primary text-primary hover:bg-primary-80",
+            secondary: "border-secondary bg-secondary-100 text-secondary-foreground hover:bg-secondary-120",
+            tertiary: "border-tertiary-120 bg-tertiary-120 text-tertiary-120 hover:bg-tertiary-100",
+            success: "border-success bg-success text-success  hover:bg-success-120",
+            info: "border-info bg-info text-info hover:bg-info-100",
+            warning: "border-warning bg-warning text-warning hover:bg-warning-100 hover:border-warning-100",
+            error: "border-error bg-error text-error hover:bg-error-120 hover:border-error-120",
+        },
+        size: {
+            sm: "px-3 py-1 text-sm rounded-[--btn-rounded-sm]",
+            md: "px-4 py-2 text-sm rounded-[--btn-rounded-md]",
+            lg: "px-6 py-4 text-base rounded-[--btn-rounded-lg]",
+        },
+        variant: {
+            solid: "border",
+            outline: "border bg-transparent hover:bg-opacity-20",
+            flat: "bg-transparent hover:bg-opacity-20",
+            link: "bg-transparent underline underline-offset-4 hover:bg-transparent hover:text-opacity-80",
+        },
+        disabled: {
+            true: "pointer-events-none border-transparent bg-secondary-110 text-secondary-130",
+        },
+        fullwidth: {
+            true: "w-full",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: ["flat", "link"],
+            disabled: true,
+            class: "border-transparent bg-transparent",
+        },
+        {
+            variant: "solid",
+            color: "primary",
+            class: "text-primary-foreground",
+        },
+        {
+            variant: "solid",
+            color: "secondary",
+            class: "text-secondary-foreground",
+        },
+        {
+            variant: "solid",
+            disabled: true,
+            color: "secondary",
+            class: "text-white",
+        },
+        {
+            variant: "solid",
+            color: "tertiary",
+            class: "text-tertiary-foreground",
+        },
+        {
+            variant: "solid",
+            color: "success",
+            class: "text-success-foreground",
+        },
+        {
+            variant: "solid",
+            color: "info",
+            class: "text-info-foreground",
+        },
+        {
+            variant: "solid",
+            color: "warning",
+            class: "text-warning-foreground",
+        },
+        {
+            variant: "solid",
+            color: "error",
+            class: "text-error-foreground",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        color: "primary",
+        variant: "solid",
+        fullwidth: true,
+    },
+});

package/dist/components/Button/Buttons.stories.js

@@ -0,0 +1,66 @@
+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 Button from "./Button";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+var meta = {
+    title: "Components/Button",
+    component: Button,
+    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", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Solid = {
+    args: {
+        title: "Button",
+    },
+    render: function (args) {
+        var props = __assign(__assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    },
+};
+export var Outline = {
+    args: {
+        title: "Button",
+        variant: "outline",
+    },
+    render: function (args) {
+        var props = __assign(__assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    },
+};
+export var Flat = {
+    args: {
+        title: "Button",
+        variant: "flat",
+    },
+    render: function (args) {
+        var props = __assign(__assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    },
+};
+export var Link = {
+    args: {
+        title: "Button",
+        variant: "link",
+    },
+    render: function (args) {
+        var props = __assign(__assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    },
+};

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)); }) }));
+    },
+};