@creativecodeco/ui 0.0.1 → 0.0.3

package/lib/types/helpers/controller.types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FieldPath, FieldValues, ControllerProps as RHFControllerProps } from 'react-hook-form';
+import { TextBox } from '../../ui/forms';
+type TextBoxType = {
+    as: typeof TextBox;
+} & React.ComponentProps<typeof TextBox>;
+type Inputs = TextBoxType;
+export type ControllerType<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<RHFControllerProps<TFieldValues, TName>, 'render'> & Inputs;
+export {};

package/lib/types/helpers/controller.types.js

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

package/lib/types/index.d.ts

@@ -1,2 +1,2 @@
-import { TextBoxType, TextBoxRef } from "./ui/forms";
-export type { TextBoxType, TextBoxRef };
+import { DropDownOption, DropDownType, TextBoxType, TextBoxRef } from './ui/forms';
+export type { DropDownOption, DropDownType, TextBoxType, TextBoxRef };

package/lib/types/ui/forms/drop-down.types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TextBoxType } from './text-box.types';
+export interface DropDownOption {
+    value: string | number;
+    label: string;
+}
+export interface DropDownType extends TextBoxType {
+    options?: DropDownOption[];
+    onChange?: (option: React.ChangeEvent<HTMLInputElement>) => void;
+    onTextChange?: (text?: string) => void;
+}

package/lib/types/ui/forms/drop-down.types.js

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

package/lib/types/ui/forms/index.d.ts

@@ -1,2 +1,3 @@
-import { TextBoxType, TextBoxRef } from "./text-box.types";
-export type { TextBoxType, TextBoxRef };
+import { DropDownOption, DropDownType } from './drop-down.types';
+import { TextBoxType, TextBoxRef } from './text-box.types';
+export type { DropDownOption, DropDownType, TextBoxType, TextBoxRef };

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

@@ -1,8 +1,14 @@
-export interface TextBoxType extends React.InputHTMLAttributes<HTMLInputElement> {
+/// <reference types="react" />
+import type { IconType } from 'react-icons';
+export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     name: string;
     label?: string;
     isError?: boolean;
     error?: string;
     disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    leftIcon?: IconType;
+    rightIcon?: IconType;
+    rightButton?: boolean;
 }
 export type TextBoxRef = HTMLInputElement;

package/lib/ui/forms/drop-down/drop-down.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DropDownType } from '../../../types';
+declare const DropDown: React.ForwardRefExoticComponent<DropDownType & React.RefAttributes<HTMLInputElement>>;
+export default DropDown;

package/lib/ui/forms/drop-down/drop-down.component.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { FaSortDown } from 'react-icons/fa';
+import { useOnClickOutside } from 'usehooks-ts';
+import { TextBox } from '../../../ui/forms';
+const DropDown = forwardRef(({ name, options = [], disabled, onChange, onTextChange, ...otherProps }, ref) => {
+    const [label, setLabel] = useState('');
+    const [open, setOpen] = useState(false);
+    const [valueFilter, setValueFilter] = useState();
+    const refOutside = useRef(null);
+    const handleClickOutside = () => {
+        const option = options.find(({ label }) => String(label) === String(valueFilter));
+        if (!option) {
+            setLabel('');
+            onTextChange?.();
+        }
+        setOpen(false);
+    };
+    useOnClickOutside(refOutside, handleClickOutside);
+    const handleFocus = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        setOpen(true);
+    }, [open, disabled]);
+    const handleSelect = useCallback((option) => {
+        onChange?.({
+            target: { value: String(option.value) }
+        });
+        setLabel(option.label);
+        setOpen(false);
+    }, [onChange]);
+    const handleChange = useCallback(({ target: { value } }) => {
+        onTextChange?.(value);
+        setValueFilter(value);
+        setLabel(value);
+    }, [onTextChange, setValueFilter]);
+    const filterOptions = useMemo(() => !valueFilter
+        ? options
+        : options.filter(({ label }) => label.includes(valueFilter)), [valueFilter, options]);
+    return (_jsxs("div", { className: 'dropdown block', children: [_jsx(TextBox, { name: name, tabIndex: 0, ref: ref, disabled: disabled, rightButton: true, rightIcon: FaSortDown, value: label, onFocus: handleFocus, onChange: handleChange, ...otherProps }), open && (_jsx("ul", { tabIndex: 0, className: 'dropdown-content z-[1] menu w-full bg-base-100', id: `options-${name}`, ref: refOutside, role: 'listitem', "data-testid": `options-${name}`, children: filterOptions.map((option) => (_jsx("li", { value: option.value, onClick: () => handleSelect(option), children: _jsx("a", { children: option.label }) }, option.value))) }))] }));
+});
+export default DropDown;

package/lib/ui/forms/drop-down/index.d.ts

@@ -0,0 +1,2 @@
+import DropDown from './drop-down.component';
+export { DropDown };

package/lib/ui/forms/drop-down/index.js

@@ -0,0 +1,2 @@
+import DropDown from './drop-down.component';
+export { DropDown };

package/lib/ui/forms/index.d.ts

@@ -1,2 +1,3 @@
-import { TextBox } from "../../ui/forms/text-box";
-export { TextBox };
+import { DropDown } from '../../ui/forms/drop-down';
+import { TextBox } from '../../ui/forms/text-box';
+export { DropDown, TextBox };

package/lib/ui/forms/index.js

@@ -1,2 +1,3 @@
-import { TextBox } from "../../ui/forms/text-box";
-export { TextBox };
+import { DropDown } from '../../ui/forms/drop-down';
+import { TextBox } from '../../ui/forms/text-box';
+export { DropDown, TextBox };

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

@@ -1,4 +1,4 @@
-import React from "react";
-import type { TextBoxType } from "../../../types/ui/forms";
+import React from 'react';
+import type { TextBoxType } from '../../../types/ui/forms';
 declare const TextBox: React.ForwardRefExoticComponent<TextBoxType & React.RefAttributes<HTMLInputElement>>;
 export default TextBox;

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

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

package/lib/ui/provider/creativecode/creativecode-ui.provider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export default function CreativeCodeUIProvider({ children }: PropsWithChildren<unknown>): JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, useEffect } from 'react';
+export default function CreativeCodeUIProvider({ children }) {
+    useEffect(() => {
+        const html = document.querySelector('html');
+        html?.setAttribute('data-theme', 'creativecode');
+    }, []);
+    return _jsx(Fragment, { children: children });
+}

package/lib/ui/provider/index.d.ts

@@ -1,2 +1,2 @@
-import CreativeCodeUIProvider from "./creativecode-ui.provider";
-export default CreativeCodeUIProvider;
+import CreativeCodeUIProvider from './creativecode/creativecode-ui.provider';
+export { CreativeCodeUIProvider };

package/lib/ui/provider/index.js

@@ -1,2 +1,2 @@
-import CreativeCodeUIProvider from "./creativecode-ui.provider";
-export default CreativeCodeUIProvider;
+import CreativeCodeUIProvider from './creativecode/creativecode-ui.provider';
+export { CreativeCodeUIProvider };

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@creativecodeco/ui",
   "description": "CreativeCode.com.co UI",
-  "version": "0.0.1",
+  "keywords": [
+    "CreativeCode.com.co",
+    "creativecodeco/ui",
+    "Tailwindcss",
+    "Daisyui",
+    "UI",
+    "Framework Design"
+  ],
+  "version": "0.0.3",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -11,49 +19,80 @@
   "main": "lib/index.js",
   "source": "src/index.ts",
   "scripts": {
-    "build-storybook": "npm run build; storybook build",
-    "build:alias": "tsc-alias -p tsconfig.build.json",
-    "build:css": "postcss src/theme/main.css -o dist/theme/main.css --minify; cpx 'src/theme/*[.]css' 'lib/theme/tailwindcss'",
+    "dev": "npm run storybook",
+    "dev:css": "postcss src/theme/main.css -o lib/theme/main.css --watch",
     "build": "rm -rf lib; tsc -p tsconfig.build.json; npm run build:alias; npm run build:css",
+    "build:alias": "tsc-alias -p tsconfig.build.json",
+    "build:css": "postcss src/theme/main.css -o lib/theme/main.css --minify; cpx 'src/theme/*[.]css' 'lib/theme/css'",
+    "build-storybook": "npm run build; storybook build",
     "chromatic": "chromatic --only-changed true",
-    "dev:css": "postcss src/theme/main.css -o dist/theme/main.css --watch",
+    "lint": "npm run lint:eslint",
+    "lint:eslint": "eslint .",
+    "lint:fix": "npm run lint:eslint --fix --quiet",
     "prepack": "npm run build",
+    "prepare": "husky install",
     "release": "npm publish --access public",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "test": "jest .",
+    "test:action": "jest --coverage | tee ./coverage.txt && jest --ci --reporters=default --reporters=jest-junit",
+    "test:update": "jest --updateSnapshot",
+    "test:watch": "jest --watch"
   },
   "peerDependencies": {
-    "react": "18.2.0"
+    "postcss": "8.4.32",
+    "postcss-import": "15.1.0",
+    "react": "18.2.0",
+    "react-hook-form": "7.49.2",
+    "tailwindcss": "3.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.6.6",
-    "@storybook/addon-interactions": "7.6.6",
-    "@storybook/addon-links": "7.6.6",
-    "@storybook/addon-onboarding": "1.0.10",
-    "@storybook/blocks": "7.6.6",
-    "@storybook/react": "7.6.6",
-    "@storybook/react-webpack5": "7.6.6",
-    "@storybook/test": "7.6.6",
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.45",
+    "@babel/core": "7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@jest/globals": "29.7.0",
+    "@storybook/addon-essentials": "7.6.7",
+    "@storybook/addon-interactions": "7.6.7",
+    "@storybook/addon-links": "7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
+    "@storybook/blocks": "7.6.7",
+    "@storybook/react": "7.6.7",
+    "@storybook/react-webpack5": "7.6.7",
+    "@storybook/test": "7.6.7",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "6.1.6",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "29.5.11",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
-    "autoprefixer": "^10.4.16",
-    "chromatic": "^10.1.0",
-    "cpx2": "6.0.1",
-    "daisyui": "4.4.21",
+    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "autoprefixer": "10.4.16",
+    "chromatic": "10.2.0",
+    "classnames": "2.5.1",
+    "cpx2": "7.0.1",
+    "daisyui": "4.4.24",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-config-standard-react": "13.0.0",
     "eslint-config-standard-with-typescript": "43.0.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-n": "16.4.0",
+    "eslint-plugin-import-order": "2.1.4",
+    "eslint-plugin-n": "16.6.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.1.0",
+    "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-standard": "5.0.0",
     "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-unused-imports": "3.0.0",
+    "husky": "8.0.3",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-junit": "16.0.0",
+    "jest-transform-css": "6.0.1",
     "postcss": "8.4.32",
     "postcss-cli": "11.0.0",
     "postcss-import": "15.1.0",
@@ -61,13 +100,18 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.6.6",
-    "storybook-addon-themes": "^6.1.0",
-    "string-width": "^7.0.0",
+    "react-hook-form": "7.49.2",
+    "react-icons": "4.12.0",
+    "storybook": "7.6.7",
+    "storybook-addon-themes": "6.1.0",
+    "string-width": "7.0.0",
     "tailwindcss": "3.4.0",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.9.2",
     "tsc-alias": "1.8.8",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "5.3.3"
+    "tsconfig-paths-webpack-plugin": "4.1.0",
+    "typescript": "5.3.3",
+    "usehooks-ts": "^2.9.1"
   },
   "files": [
     "lib"

package/lib/theme/tailwindcss/input.css

@@ -1,3 +0,0 @@
-.input-john {
-  @apply bg-primary;
-}

package/lib/theme/tailwindcss/main.css

@@ -1,5 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "./input.css";

package/lib/ui/provider/creativecode-ui.provider.d.ts

@@ -1,2 +0,0 @@
-import { PropsWithChildren } from "react";
-export default function CreativeCodeUIProvider({ children, }: PropsWithChildren<unknown>): JSX.Element;

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

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from "react";
-export default function CreativeCodeUIProvider({ children, }) {
-    return _jsx(Fragment, { children: children });
-}