@creativecodeco/ui 0.0.3 → 0.0.5

package/README.md

@@ -1,6 +1,6 @@
 # @creativecodeco/ui
 
-<img src="https://www.creativecode.com.co/wp-content/uploads/2020/01/CreativeCode.png" alt="CreativeCode.com.co" width="120" />
+![CreativeCode.com.co](https://www.creativecode.com.co/wp-content/uploads/2024/01/CreativeCode.png)
 
 > System Design CreativeCode.com.co
 
@@ -25,11 +25,11 @@ yarn add @creativecodeco/ui
 ### Dependencies
 
 ```bash
-npm install --save-dev tailwindcss postcss postcss-import autoprefixer
+npm install --save-dev tailwindcss postcss postcss-import autoprefixer usehooks-ts
 
 or
 
-yarn add -D tailwindcss postcss postcss-import autoprefixer
+yarn add -D tailwindcss postcss postcss-import autoprefixer usehooks-ts
 ```
 
 ### Setting Tailwind
@@ -93,3 +93,5 @@ export default function RootLayout({ children }) {
 ## License
 
 MIT © [CreativeCode.com.co](https://github.com/creativecodeco)
+
+Web [CreativeCode.com.co](https://creativecode.com.co)

package/lib/helpers/react-hook-form/controller.component.d.ts

@@ -1,3 +1,3 @@
 import { type FieldPath, type FieldValues } from 'react-hook-form';
-import { ControllerType } from '../../types/helpers/controller.types';
+import type { ControllerType } from '../../types/helpers/controller.types';
 export default function Controller<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, as: Input, defaultValue, shouldUnregister, rules, ...rest }: ControllerType<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, 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 DropDown = forwardRef(({ name, options = [], disabled, onChange, onTextChange, value, ...otherProps }, ref) => {
     const [label, setLabel] = useState('');
     const [open, setOpen] = useState(false);
     const [valueFilter, setValueFilter] = useState();
@@ -17,6 +17,14 @@ const DropDown = forwardRef(({ name, options = [], disabled, onChange, onTextCha
         setOpen(false);
     };
     useOnClickOutside(refOutside, handleClickOutside);
+    useEffect(() => {
+        const option = options.find((option) => String(option.value) === String(value));
+        if (!option) {
+            setLabel('');
+            return;
+        }
+        setLabel(option.label);
+    }, [value]);
     const handleFocus = useCallback(() => {
         if (disabled) {
             return;
@@ -38,6 +46,6 @@ const DropDown = forwardRef(({ name, options = [], disabled, onChange, onTextCha
     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))) }))] }));
+    return (_jsxs("div", { className: 'dropdown block', children: [_jsx(TextBox, { name: name, tabIndex: 0, ref: ref, disabled: disabled, rightButton: true, rightIcon: FaSortDown, onFocus: handleFocus, onChange: handleChange, ...otherProps, value: label }), 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/package.json

@@ -9,7 +9,7 @@
     "UI",
     "Framework Design"
   ],
-  "version": "0.0.3",
+  "version": "0.0.5",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -43,18 +43,19 @@
     "postcss-import": "15.1.0",
     "react": "18.2.0",
     "react-hook-form": "7.49.2",
-    "tailwindcss": "3.4.0"
+    "tailwindcss": "3.4.0",
+    "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
     "@babel/core": "7.23.7",
-    "@babel/preset-env": "^7.23.7",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@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/addon-mdx-gfm": "7.6.7",
     "@storybook/blocks": "7.6.7",
     "@storybook/react": "7.6.7",
     "@storybook/react-webpack5": "7.6.7",
@@ -111,7 +112,7 @@
     "tsc-alias": "1.8.8",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.3.3",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "2.9.1"
   },
   "files": [
     "lib"