Merge pull request #22 from ahmetarsiv/master

Bug fixed & UI upgrade
codenteq · Apr 7, 2024 · 2263247 · 2263247
2 parents 38ae252 + 7579c59
commit 2263247
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codenteq/interfeys",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Codenteq Interfeys Design System",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
 interface IDrawerProps {
@@ -8,6 +8,20 @@ interface IDrawerProps {
 }
 
 export default function Modal({ isOpen, onClose, children }: IDrawerProps) {
+    useEffect(() => {
+        const handleKeyPress = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyPress);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyPress);
+        };
+    }, []);
+
     return (
         <AnimatePresence>
             {isOpen && (
@@ -27,7 +41,7 @@ export default function Modal({ isOpen, onClose, children }: IDrawerProps) {
                             damping: 30,
                             delay: 0.1,
                         }}
-                        className="bg-white w-80 h-full shadow-xl overflow-y-auto">
+                        className="bg-white dark:bg-black border-l border-brand w-80 h-full shadow-xl overflow-y-auto">
                         <div className="px-4 py-6">{children}</div>
                     </motion.div>
                     <motion.button

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -22,7 +22,9 @@ type InputType =
     | 'file'
     | 'search'
     | 'checkbox'
-    | 'range';
+    | 'range'
+    | 'hidden'
+    | 'color';
 
 interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
     type: InputType;
@@ -69,9 +71,11 @@ const Input = forwardRef(
                     <input
                         ref={ref}
                         type={
-                            type === 'password' && !showPassword
-                                ? 'password'
-                                : 'text'
+                            type !== 'password'
+                                ? type
+                                : !showPassword
+                                  ? 'password'
+                                  : 'text'
                         }
                         value={value}
                         onChange={onChange}

diff --git a/src/select/Select.tsx b/src/select/Select.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, Ref, SelectHTMLAttributes } from 'react';
+import Label from '../label/Label';
 
 interface SelectOption {
     label: string;
@@ -13,6 +14,7 @@ interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     required?: boolean;
     disabled?: boolean;
     messages?: string | string[];
+    label?: string;
 }
 
 const Select = forwardRef(
@@ -25,11 +27,13 @@ const Select = forwardRef(
             required,
             disabled,
             messages = [],
+            label,
             ...props
         }: ISelectProps,
         ref: Ref<HTMLSelectElement>,
     ) => (
         <div>
+            {label && <Label>{label}</Label>}
             <select
                 ref={ref}
                 value={value}

diff --git a/stories/Input.stories.ts b/stories/Input.stories.ts
@@ -110,3 +110,15 @@ export const RangeInput: Story = {
         type: 'range',
     },
 };
+
+export const HiddenInput: Story = {
+    args: {
+        type: 'hidden',
+    },
+};
+
+export const ColorInput: Story = {
+    args: {
+        type: 'color',
+    },
+};