@creativecodeco/ui 0.6.2 → 1.0.0

package/lib/ui/forms/textbox/textbox.component.js

@@ -0,0 +1,26 @@
+"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 classnames_1 = __importDefault(require("classnames"));
+const TextBox = (0, react_1.forwardRef)(({ name, label, isError, error, disabled, size = 'md', color, leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+    return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: name, className: 'form-control w-full flex flex-row gap-2', children: [label && ((0, jsx_runtime_1.jsx)("div", { className: 'label', children: (0, jsx_runtime_1.jsx)("span", { className: 'label-text', children: label }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'relative', children: [LeftIcon && ((0, jsx_runtime_1.jsx)(LeftIcon, { className: (0, classnames_1.default)('textbox-left-icon', {
+                            [`textbox-left-icon-size-${size}`]: size,
+                            'cursor-not-allowed': disabled
+                        }) })), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: name, name: name, "data-testid": name, ...otherProps, onClick: (e) => !disabled && onClick?.(e), className: (0, classnames_1.default)('input input-bordered w-full', `textbox-size-${size}`, {
+                            'input-error': isError,
+                            'textbox-with-left-icon': LeftIcon,
+                            'textbox-with-right-icon': RightIcon,
+                            [`textbox-color-${color}`]: !isError && color
+                        }), disabled: disabled }), RightIcon && ((0, jsx_runtime_1.jsx)(RightIcon, { className: (0, classnames_1.default)('textbox-right-icon', {
+                            [`textbox-right-icon-size-${size}`]: size,
+                            'cursor-pointer': !disabled && rightButton,
+                            'cursor-not-allowed': disabled
+                        }), onClick: () => rightButton && !disabled && inputRef.current?.click() }))] }), isError && (0, jsx_runtime_1.jsx)("p", { className: 'text-red-500 flex items-center', children: error })] }));
+});
+exports.default = TextBox;

package/lib/ui/provider/creativecode/creativecode-ui.provider.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment, useEffect } from 'react';
-export default function CreativeCodeUIProvider({ children }) {
-    useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CreativeCodeUIProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function CreativeCodeUIProvider({ children }) {
+    (0, react_1.useEffect)(() => {
         const html = document.querySelector('html');
         html?.setAttribute('data-theme', 'creativecode');
     }, []);
-    return _jsx(Fragment, { children: children });
+    return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children });
 }

package/lib/ui/provider/index.js

@@ -1,2 +1,8 @@
-import CreativeCodeUIProvider from './creativecode/creativecode-ui.provider';
-export { CreativeCodeUIProvider };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreativeCodeUIProvider = void 0;
+const creativecode_ui_provider_1 = __importDefault(require("./creativecode/creativecode-ui.provider"));
+exports.CreativeCodeUIProvider = creativecode_ui_provider_1.default;

package/lib/utils/index.js

@@ -1 +1,17 @@
-export * from './string.utils';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./string.utils"), exports);

package/lib/utils/string.utils.js

@@ -1,3 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitials = getInitials;
+exports.isValidUrl = isValidUrl;
 /**
  * Generates initials from the given name.
  *
@@ -22,7 +26,7 @@
  *
  * @public
  */
-export function getInitials(name) {
+function getInitials(name) {
     const words = name.split(' ');
     const getCharAt = (word) => word.charAt(0).toUpperCase();
     if (words.length === 1) {
@@ -61,7 +65,7 @@ export function getInitials(name) {
  *
  * @public
  */
-export function isValidUrl(uri) {
+function isValidUrl(uri) {
     if (!uri) {
         return false;
     }
@@ -69,7 +73,7 @@ export function isValidUrl(uri) {
         new URL(uri);
         return true;
     }
-    catch (ignored) {
+    catch (_) {
         return false;
     }
 }

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.6.2",
+  "version": "1.0.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -40,87 +40,80 @@
     "test:watch": "jest --watch"
   },
   "peerDependencies": {
-    "postcss": "8.4.41",
-    "postcss-import": "16.1.0",
+    "@tailwindcss/postcss": "4.1.18",
+    "postcss": "8.5.6",
     "react": "18.3.1",
-    "react-hook-form": "7.52.2",
-    "tailwindcss": "3.4.9",
-    "usehooks-ts": "3.1.0"
+    "react-hook-form": "7.58.1",
+    "tailwindcss": "4.1.18",
+    "usehooks-ts": "3.1.1"
   },
   "dependencies": {
-    "postcss": "8.4.41",
-    "postcss-import": "16.1.0",
+    "@tailwindcss/postcss": "4.1.18",
+    "postcss": "8.5.6",
     "react": "18.3.1",
-    "react-hook-form": "7.52.2",
-    "tailwindcss": "3.4.9",
-    "usehooks-ts": "3.1.0"
+    "react-hook-form": "7.58.1",
+    "tailwindcss": "4.1.18",
+    "usehooks-ts": "3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@babel/preset-env": "7.25.3",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@chromatic-com/storybook": "1.6.1",
-    "@jest/globals": "29.7.0",
-    "@storybook/addon-essentials": "8.2.8",
-    "@storybook/addon-interactions": "8.2.8",
-    "@storybook/addon-links": "8.2.8",
-    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
-    "@storybook/blocks": "8.2.8",
-    "@storybook/manager-api": "8.2.8",
-    "@storybook/react": "8.2.8",
-    "@storybook/react-webpack5": "8.2.8",
-    "@storybook/test": "8.2.8",
-    "@storybook/theming": "8.2.8",
-    "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.4.8",
+    "@babel/core": "7.28.5",
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@chromatic-com/storybook": "4.1.3",
+    "@eslint/js": "^9.39.2",
+    "@jest/globals": "30.2.0",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-links": "10.1.11",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.2",
+    "@storybook/react-webpack5": "10.1.11",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "14.3.1",
-    "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.12",
-    "@types/node": "22.1.0",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "autoprefixer": "10.4.20",
-    "chromatic": "11.7.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/jest": "30.0.0",
+    "@types/node": "25.0.3",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.7",
+    "chromatic": "13.3.4",
     "classnames": "2.5.1",
-    "cpx2": "7.0.1",
-    "daisyui": "4.12.10",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "9.1.0",
+    "cpx2": "8.0.0",
+    "daisyui": "5.5.14",
+    "eslint": "8.57.1",
+    "eslint-config-prettier": "10.1.8",
     "eslint-config-standard": "17.1.0",
     "eslint-config-standard-react": "13.0.0",
     "eslint-config-standard-with-typescript": "43.0.1",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-import-order": "2.1.4",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-promise": "6.6.0",
-    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react": "7.37.5",
     "eslint-plugin-standard": "5.0.0",
-    "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-unused-imports": "3.2.0",
-    "husky": "9.1.4",
+    "eslint-plugin-storybook": "10.1.11",
+    "eslint-plugin-unused-imports": "4.3.0",
+    "globals": "^17.0.0",
+    "husky": "9.1.7",
     "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jest-environment-jsdom": "30.2.0",
     "jest-junit": "16.0.0",
-    "jest-transform-css": "6.0.1",
-    "postcss-cli": "11.0.0",
-    "prettier": "3.3.3",
+    "jest-transform-css": "6.0.3",
+    "postcss-cli": "11.0.1",
+    "prettier": "3.7.4",
     "prop-types": "15.8.1",
     "react-dom": "18.3.1",
-    "react-icons": "5.2.1",
-    "storybook": "8.2.8",
-    "string-width": "7.2.0",
-    "ts-jest": "29.2.4",
+    "react-icons": "5.5.0",
+    "storybook": "10.1.11",
+    "string-width": "8.1.0",
+    "ts-jest": "29.4.6",
     "ts-node": "10.9.2",
-    "tsc-alias": "1.8.10",
-    "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.5.4"
+    "tsc-alias": "1.8.16",
+    "tsconfig-paths-webpack-plugin": "4.2.0",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.51.0"
   },
   "files": [
     "lib"
-  ],
-  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+  ]
 }

package/lib/theme/css/text-box.css

@@ -1,113 +0,0 @@
-.text-box-size {
-  &-xs {
-    @apply input-xs;
-
-    &.text-box-with-left-icon {
-      @apply pl-8;
-    }
-
-    &.text-box-with-right-icon {
-      @apply pr-8;
-    }
-  }
-
-  &-sm {
-    @apply input-sm;
-
-    &.text-box-with-left-icon {
-      @apply pl-8;
-    }
-
-    &.text-box-with-right-icon {
-      @apply pr-8;
-    }
-  }
-
-  &-md {
-    @apply input-md;
-
-    &.text-box-with-left-icon {
-      @apply pl-9;
-    }
-
-    &.text-box-with-right-icon {
-      @apply pr-9;
-    }
-  }
-
-  &-lg {
-    @apply input-lg;
-
-    &.text-box-with-left-icon {
-      @apply pl-9;
-    }
-
-    &.text-box-with-right-icon {
-      @apply pr-9;
-    }
-  }
-}
-
-.text-box-left-icon {
-  @apply absolute;
-
-  &-size-xs {
-    @apply top-[5px] left-2;
-  }
-
-  &-size-sm {
-    @apply top-2 left-2;
-  }
-
-  &-size-md {
-    @apply top-4 left-3;
-  }
-
-  &-size-lg {
-    @apply top-6 left-3;
-  }
-}
-
-.text-box-right-icon {
-  @apply absolute;
-
-  &-size-xs {
-    @apply top-[5px] right-2;
-  }
-
-  &-size-sm {
-    @apply top-2 right-2;
-  }
-
-  &-size-md {
-    @apply top-4 right-3;
-  }
-
-  &-size-lg {
-    @apply top-6 right-3;
-  }
-}
-
-.text-box-color {
-  &-primary {
-    @apply input-primary;
-  }
-  &-secondary {
-    @apply input-secondary;
-  }
-  &-accent {
-    @apply input-accent;
-  }
-  &-success {
-    @apply input-success;
-  }
-  &-warning {
-    @apply input-warning;
-  }
-  &-info {
-    @apply input-info;
-  }
-  &-error {
-    @apply input-error;
-  }
-}

package/lib/types/ui/forms/text-box.types.js

@@ -1 +0,0 @@
-export {};

package/lib/ui/forms/text-box/index.d.ts

@@ -1,2 +0,0 @@
-import TextBox from "./text-box.component";
-export { TextBox };

package/lib/ui/forms/text-box/index.js

@@ -1,2 +0,0 @@
-import TextBox from "./text-box.component";
-export { TextBox };

package/lib/ui/forms/text-box/text-box.component.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import cls from 'classnames';
-const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', color, leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    return (_jsxs("label", { htmlFor: name, className: 'form-control w-full flex', children: [label && _jsx("span", { className: 'label-text', children: label }), _jsxs("div", { className: 'relative', children: [LeftIcon && (_jsx(LeftIcon, { className: cls('text-box-left-icon', {
-                            [`text-box-left-icon-size-${size}`]: size,
-                            'cursor-not-allowed': disabled
-                        }) })), _jsx("input", { ref: inputRef, id: name, name: name, "data-testid": name, ...otherProps, onClick: (e) => !disabled && onClick?.(e), className: cls('input input-bordered w-full', `text-box-size-${size}`, {
-                            'input-error': isError,
-                            'text-box-with-left-icon': LeftIcon,
-                            'text-box-with-right-icon': RightIcon,
-                            [`text-box-color-${color}`]: !isError && color
-                        }), disabled: disabled }), RightIcon && (_jsx(RightIcon, { className: cls('text-box-right-icon', {
-                            [`text-box-right-icon-size-${size}`]: size,
-                            'cursor-pointer': !disabled && rightButton,
-                            'cursor-not-allowed': disabled
-                        }), onClick: () => rightButton && !disabled && inputRef.current?.click() }))] }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
-});
-export default TextBox;