style: improve dropInput classes prop

src/Components/Inputs/DatePicker/DatePicker.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import DatePicker from './DatePicker';
 
 export default {
-    title: 'Shared/DatePicker',
+    title: 'Shared/Inputs/Date Picker',
     component: DatePicker,
 
 } as ComponentMeta<typeof DatePicker>;

src/Components/Inputs/FilesInput/DropInput.jsx

@@ -11,7 +11,11 @@ export default function DropInput({
   height,
   multiple = false,
   allowedType = "*",
-  classes = {},
+  classes = {
+    base: "",
+    idle: "",
+    dragging: "",
+  },
 }) {
   const [isDragging, toggleDrag] = useToggle(false);
   const fileInputRef = React.useRef(null);
@@ -40,7 +44,9 @@ export default function DropInput({
         onFrameDragLeave={() => toggleDrag(false)}
         onFrameDrop={() => toggleDrag(false)}
         className={`h-full cursor-pointer`}
-        targetClassName={`h-full ${classes.wrapper}`}
+        targetClassName={`h-full ${classes.base} ${
+          status === "empty" && classes.idle
+        }`}
         draggingOverFrameClassName={`${classes.dragging}`}
       >
         {status === "dragging" && draggingContent}

src/Components/Inputs/FilesInput/FileInput.stories.tsx

@@ -6,7 +6,7 @@ import FilesInput from './FilesInput';
 import FileDropInput from './FilesDropInput';
 
 export default {
-    title: 'Shared/Files Input',
+    title: 'Shared/Inputs/Files Input',
     component: FilesInput,
 
 } as ComponentMeta<typeof FilesInput>;
@@ -27,5 +27,5 @@ CustomizedButton.args = {
 const DropTemplate: ComponentStory<typeof FileDropInput> = (args) => <div className="max-w-[500px]"><FileDropInput {...args as any} /></div>
 export const DropZoneInput = DropTemplate.bind({});
 DropZoneInput.args = {
-    onChange: () => { },
+    onChange: console.log,
 }

src/Components/Inputs/FilesInput/FilesDropInput.tsx

@@ -14,8 +14,10 @@ type Props = {
     uploadText?: string;
     allowedType?: 'images';
     classes?: Partial<{
-        wrapper: string,
-        dragging: string
+        base: string,
+        idle: string,
+        dragging: string,
+        hasFiles: string
     }>
 }
 
@@ -44,8 +46,9 @@ export default function FilesInput({
 }: Props) {
 
 
-    const wrapperClasses = classes?.wrapper ?? 'bg-primary-50 p-32 border border-primary-500 rounded-8 text-center flex flex-col justify-center items-center'
-    const draggingClasses = classes?.dragging ?? '!bg-primary-500 !text-white'
+    const baseClasses = classes?.base ?? 'p-32 rounded-8 text-center flex flex-col justify-center items-center'
+    const idleClasses = classes?.idle ?? 'bg-primary-50 hover:bg-primary-25 border border-dashed border-primary-500 text-gray-800'
+    const draggingClasses = classes?.dragging ?? 'bg-primary-500 text-white'
 
     return (
         <DropInput
@@ -58,7 +61,8 @@ export default function FilesInput({
             multiple={multiple}
             allowedType={fileAccept[allowedType]}
             classes={{
-                wrapper: wrapperClasses,
+                base: baseClasses,
+                idle: idleClasses,
                 dragging: draggingClasses
             }}
         />

src/Components/Inputs/TagsInput/TagsInput.stories.tsx

@@ -4,7 +4,7 @@ import { WrapForm } from 'src/utils/storybook/decorators';
 import TagsInput from './TagsInput';
 
 export default {
-    title: 'Shared/TagsInput',
+    title: 'Shared/Inputs/Tags Input',
     component: TagsInput,
     argTypes: {
         backgroundColor: { control: 'color' },

src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx

@@ -5,7 +5,7 @@ import InsertImageModal from './InsertImageModal';
 import { ModalsDecorator } from 'src/utils/storybook/decorators';
 
 export default {
-    title: 'Shared/TextEditor/Insert Image Modal',
+    title: 'Shared/Inputs/Text Editor/Insert Image Modal',
     component: InsertImageModal,
 
     decorators: [ModalsDecorator]

src/Components/Inputs/TextEditor/TextEditor.stories.tsx

@@ -5,7 +5,7 @@ import { WithModals } from 'src/utils/storybook/decorators';
 import TextEditor from './TextEditor';
 
 export default {
-    title: 'Shared/TextEditor',
+    title: 'Shared/Inputs/Text Editor',
     decorators: [WithModals],
     component: TextEditor,