Merge pull request #14 from ahmetarsiv/master

Some bug fixed
codenteq · Mar 9, 2024 · 2d7cc6d · 2d7cc6d
2 parents ca828f6 + a59702a
commit 2d7cc6d
Show file tree

Hide file tree

Showing 17 changed files with 144 additions and 115 deletions.
diff --git 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
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 interface IAvatarProps {

diff --git 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
@@ -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
@@ -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
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 interface IInfoCardProps {

diff --git 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
@@ -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
@@ -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
@@ -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,15 +42,20 @@ 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}>
                             {message}
                         </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
@@ -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
@@ -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
@@ -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,15 +45,20 @@ 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}>
                             {message}
                         </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
@@ -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
@@ -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
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { ReactNode } from 'react';
 import { IBasePaginate } from './IPaginate';