feature/CC 3 drop down (#12)

* Fix imports Reac Hook Form, perDependencies

* Fix types

* Update version package-lock

README.md

@@ -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

package.json

@@ -9,7 +9,7 @@
     "UI",
     "Framework Design"
   ],
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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"

src/docs/getting-started.docs.mdx

@@ -27,11 +27,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

src/helpers/react-hook-form/controller.component.tsx

@@ -4,7 +4,7 @@ import {
   Controller as RHFController
 } 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,

src/helpers/react-hook-form/controller.test.tsx

@@ -1,8 +1,10 @@
 import { act, render, renderHook, screen } from '@testing-library/react';
 import { useForm } from 'react-hook-form';
-import Controller from './controller.component';
+
 import { TextBox } from '@/ui/forms';
 
+import Controller from './controller.component';
+
 describe('<Controller />', () => {
   test('render the input with value', () => {
     const { result } = renderHook(() => useForm());

src/types/helpers/controller.types.ts

@@ -4,13 +4,17 @@ import type {
   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,