From a59702a6c5b5daf62a62b5cac16b2145e0059145 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ahmet=20Sefa=20Ar=C5=9Fiv?= <ahmetarsivpm@gmail.com>
Date: Sun, 10 Mar 2024 02:27:51 +0300
Subject: [PATCH] Some bug fixed

---
 package.json               |  2 +-
 src/avatar/Avatar.tsx      |  2 --
 src/badge/Badge.tsx        |  2 --
 src/button/Button.tsx      |  2 --
 src/card/Card.tsx          |  2 --
 src/info-card/InfoCard.tsx |  2 --
 src/input/Input.tsx        | 48 +++++++++++++++++++++++---------------
 src/label/Label.tsx        |  2 --
 src/modal/Modal.tsx        |  2 --
 src/radio/Radio.tsx        | 48 ++++++++++++++++++++++++--------------
 src/select/Select.tsx      | 37 ++++++++++++++++-------------
 src/slider/Slider.tsx      | 11 ++++++---
 src/switch/Switch.tsx      | 48 ++++++++++++++++++++++++--------------
 src/tab-group/Tab.tsx      |  2 --
 src/table/Datatable.tsx    |  2 --
 src/table/Pagination.tsx   |  2 --
 src/textarea/Textarea.tsx  | 45 +++++++++++++++++++----------------
 17 files changed, 144 insertions(+), 115 deletions(-)

diff --git a/package.json b/package.json
index 6e69fd1..6b4b94b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codenteq/interfeys",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Codenteq Interfeys Design System",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
index 01c97ea..4fd5e90 100644
--- a/src/avatar/Avatar.tsx
+++ b/src/avatar/Avatar.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 interface IAvatarProps {
diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
index c77017f..c151044 100644
--- a/src/badge/Badge.tsx
+++ b/src/badge/Badge.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 interface IBadgeProps {
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index b562b30..3cc5557 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 type IButtonType = 'button' | 'submit' | 'reset';
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
index a434ea4..a565617 100644
--- a/src/card/Card.tsx
+++ b/src/card/Card.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { ReactNode, useState } from 'react';
 
 interface ICardProps {
diff --git a/src/info-card/InfoCard.tsx b/src/info-card/InfoCard.tsx
index b79d4d6..ed43185 100644
--- a/src/info-card/InfoCard.tsx
+++ b/src/info-card/InfoCard.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 interface IInfoCardProps {
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index 3766516..8a18966 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -1,6 +1,9 @@
-'use client';
-
-import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import React, {
+    ChangeEvent,
+    forwardRef,
+    InputHTMLAttributes,
+    Ref,
+} from 'react';
 
 type InputType =
     | 'text'
@@ -32,22 +35,26 @@ interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
     messages?: string | string[];
 }
 
-export default function Input({
-    className,
-    type,
-    value,
-    onChange,
-    placeholder,
-    autoFocus,
-    required,
-    disabled,
-    helpText,
-    messages = [],
-    ...props
-}: IInputProps) {
-    return (
+const Input = forwardRef(
+    (
+        {
+            className,
+            type,
+            value,
+            onChange,
+            placeholder,
+            autoFocus,
+            required,
+            disabled,
+            helpText,
+            messages = [],
+            ...props
+        }: IInputProps,
+        ref: Ref<HTMLInputElement>,
+    ) => (
         <div>
             <input
+                ref={ref}
                 type={type}
                 value={value}
                 onChange={onChange}
@@ -75,5 +82,8 @@ export default function Input({
                 <p className="text-sm text-red-600">{messages}</p>
             )}
         </div>
-    );
-}
+    ),
+);
+Input.displayName = 'Input';
+
+export default Input;
diff --git a/src/label/Label.tsx b/src/label/Label.tsx
index c97ab19..83ca4cf 100644
--- a/src/label/Label.tsx
+++ b/src/label/Label.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 interface ILabelProps extends React.HTMLProps<HTMLLabelElement> {
diff --git a/src/modal/Modal.tsx b/src/modal/Modal.tsx
index 2892323..17f6d4c 100644
--- a/src/modal/Modal.tsx
+++ b/src/modal/Modal.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
diff --git a/src/radio/Radio.tsx b/src/radio/Radio.tsx
index a6b678c..8abf9e5 100644
--- a/src/radio/Radio.tsx
+++ b/src/radio/Radio.tsx
@@ -1,6 +1,9 @@
-'use client';
-
-import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import React, {
+    ChangeEvent,
+    forwardRef,
+    InputHTMLAttributes,
+    Ref,
+} from 'react';
 
 type InputType = 'radio';
 
@@ -11,22 +14,26 @@ interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     required?: boolean;
     disabled?: boolean;
-    messages?: string[];
+    messages?: string | string[];
 }
 
-export default function Radio({
-    className,
-    type,
-    value,
-    onChange,
-    required,
-    disabled,
-    messages = [],
-    ...props
-}: IRadioProps) {
-    return (
+const Radio = forwardRef(
+    (
+        {
+            className,
+            type,
+            value,
+            onChange,
+            required,
+            disabled,
+            messages = [],
+            ...props
+        }: IRadioProps,
+        ref: Ref<HTMLInputElement>,
+    ) => (
         <div>
             <input
+                ref={ref}
                 type={type}
                 value={value}
                 onChange={onChange}
@@ -35,7 +42,7 @@ export default function Radio({
                 disabled={disabled}
                 {...props}
             />
-            {messages.length > 0 && (
+            {messages.length > 0 && Array.isArray(messages) ? (
                 <>
                     {messages.map((message, index) => (
                         <p className="text-sm text-red-600" key={index}>
@@ -43,7 +50,12 @@ export default function Radio({
                         </p>
                     ))}
                 </>
+            ) : (
+                <p className="text-sm text-red-600">{messages}</p>
             )}
         </div>
-    );
-}
+    ),
+);
+Radio.displayName = 'Radio';
+
+export default Radio;
diff --git a/src/select/Select.tsx b/src/select/Select.tsx
index 2ae23f7..6a6bf1b 100644
--- a/src/select/Select.tsx
+++ b/src/select/Select.tsx
@@ -1,6 +1,4 @@
-'use client';
-
-import React, { SelectHTMLAttributes } from 'react';
+import React, { forwardRef, Ref, SelectHTMLAttributes } from 'react';
 
 interface SelectOption {
     label: string;
@@ -17,19 +15,23 @@ interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     messages?: string | string[];
 }
 
-export default function Select({
-    options,
-    value,
-    placeholder,
-    className,
-    required,
-    disabled,
-    messages = [],
-    ...props
-}: ISelectProps) {
-    return (
+const Select = forwardRef(
+    (
+        {
+            options,
+            value,
+            placeholder,
+            className,
+            required,
+            disabled,
+            messages = [],
+            ...props
+        }: ISelectProps,
+        ref: Ref<HTMLSelectElement>,
+    ) => (
         <div>
             <select
+                ref={ref}
                 value={value}
                 className={`${className} w-full text-sm transition placeholder-transition hover:border-zinc-900 dark:hover:border-zinc-300 hover:placeholder-text-zinc-900 dark:hover:placeholder-text-zinc-300 focus:ring-transparent focus:border-zinc-900 dark:focus:border-zinc-300 bg-white dark:bg-black text-zinc-900 dark:text-zinc-300 focus:placeholder-text-zinc-900 dark:focus:placeholder-text-zinc-300 rounded-lg p-3`}
                 disabled={disabled}
@@ -58,5 +60,8 @@ export default function Select({
                 <p className="text-sm text-red-600">{messages}</p>
             )}
         </div>
-    );
-}
+    ),
+);
+Select.displayName = 'Select';
+
+export default Select;
diff --git a/src/slider/Slider.tsx b/src/slider/Slider.tsx
index 20830a5..f6437b5 100644
--- a/src/slider/Slider.tsx
+++ b/src/slider/Slider.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -13,7 +11,14 @@ interface ISliderProps {
     spaceBetween?: number;
 }
 
-export default function Slider({ images, width, height, className, slidesPerView = 1, spaceBetween = 20 }: ISliderProps) {
+export default function Slider({
+    images,
+    width,
+    height,
+    className,
+    slidesPerView = 1,
+    spaceBetween = 20,
+}: ISliderProps) {
     return (
         <Swiper
             className={className}
diff --git a/src/switch/Switch.tsx b/src/switch/Switch.tsx
index 9810f94..aae61bf 100644
--- a/src/switch/Switch.tsx
+++ b/src/switch/Switch.tsx
@@ -1,6 +1,9 @@
-'use client';
-
-import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import React, {
+    ChangeEvent,
+    forwardRef,
+    InputHTMLAttributes,
+    Ref,
+} from 'react';
 
 type InputType = 'checkbox';
 
@@ -11,23 +14,27 @@ interface ISwitchProps extends InputHTMLAttributes<HTMLInputElement> {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     required?: boolean;
     disabled?: boolean;
-    messages?: string[];
+    messages?: string | string[];
 }
 
-export default function Switch({
-    className,
-    type,
-    value,
-    onChange,
-    required,
-    disabled,
-    messages = [],
-    ...props
-}: ISwitchProps) {
-    return (
+const Switch = forwardRef(
+    (
+        {
+            className,
+            type,
+            value,
+            onChange,
+            required,
+            disabled,
+            messages = [],
+            ...props
+        }: ISwitchProps,
+        ref: Ref<HTMLInputElement>,
+    ) => (
         <div>
             <label className="relative inline-flex items-center mr-5 cursor-pointer">
                 <input
+                    ref={ref}
                     type={type}
                     value={value}
                     onChange={onChange}
@@ -38,7 +45,7 @@ export default function Switch({
                 />
                 <div className="w-11 h-6 bg-zinc-300 rounded-full peer dark:bg-zinc-900 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-zinc-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-zinc-600 peer-checked:bg-brand" />
             </label>
-            {messages.length > 0 && (
+            {messages.length > 0 && Array.isArray(messages) ? (
                 <>
                     {messages.map((message, index) => (
                         <p className="text-sm text-red-600" key={index}>
@@ -46,7 +53,12 @@ export default function Switch({
                         </p>
                     ))}
                 </>
+            ) : (
+                <p className="text-sm text-red-600">{messages}</p>
             )}
         </div>
-    );
-}
+    ),
+);
+Switch.displayName = 'Switch';
+
+export default Switch;
diff --git a/src/tab-group/Tab.tsx b/src/tab-group/Tab.tsx
index 9b8d621..332eb98 100644
--- a/src/tab-group/Tab.tsx
+++ b/src/tab-group/Tab.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { ReactNode, useState } from 'react';
 
 interface ITabProps {
diff --git a/src/table/Datatable.tsx b/src/table/Datatable.tsx
index 0ecd8fa..6b9e73b 100644
--- a/src/table/Datatable.tsx
+++ b/src/table/Datatable.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { ChangeEvent, ReactNode } from 'react';
 import Input from '../input/Input';
 import { useTable, usePagination, Column } from 'react-table';
diff --git a/src/table/Pagination.tsx b/src/table/Pagination.tsx
index 4f3dcf3..66120bb 100644
--- a/src/table/Pagination.tsx
+++ b/src/table/Pagination.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { ReactNode } from 'react';
 import { IBasePaginate } from './IPaginate';
 
diff --git a/src/textarea/Textarea.tsx b/src/textarea/Textarea.tsx
index ade7bc2..a288fa5 100644
--- a/src/textarea/Textarea.tsx
+++ b/src/textarea/Textarea.tsx
@@ -1,6 +1,4 @@
-'use client';
-
-import React, { TextareaHTMLAttributes } from 'react';
+import React, { forwardRef, Ref, TextareaHTMLAttributes } from 'react';
 
 interface ITextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     rows?: number;
@@ -15,23 +13,27 @@ interface ITextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     helpText?: string;
 }
 
-export default function Textarea({
-    rows,
-    cols,
-    className,
-    value,
-    placeholder,
-    minLength,
-    maxLength,
-    autoFocus,
-    required,
-    disabled,
-    helpText,
-    ...props
-}: ITextareaProps) {
-    return (
+const Textarea = forwardRef(
+    (
+        {
+            rows,
+            cols,
+            className,
+            value,
+            placeholder,
+            minLength,
+            maxLength,
+            autoFocus,
+            required,
+            disabled,
+            helpText,
+            ...props
+        }: ITextareaProps,
+        ref: Ref<HTMLTextAreaElement>,
+    ) => (
         <div>
             <textarea
+                ref={ref}
                 rows={rows}
                 cols={cols}
                 value={value}
@@ -50,5 +52,8 @@ export default function Textarea({
                 </div>
             )}
         </div>
-    );
-}
+    ),
+);
+Textarea.displayName = 'Textarea';
+
+export default Textarea;