Merge pull request #31 from maemreyo/feat/imprv-ui

Feat/imprv UI

Author: maemreyo

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.11",
+  "version": "0.0.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -112,6 +112,7 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
+    "@types/lodash": "^4",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@types/styled-components": "^5.1.34",
@@ -148,6 +149,9 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
+    "lodash": "^4.17.21",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-hook-form": "^7.49.3",
     "styled-components": "^6.1.13",
     "yup": "^1.6.1"

src/DynamicForm.stories.tsx

@@ -1,4 +1,3 @@
-// Filepath: /src/DynamicForm.stories.tsx
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { fn } from '@storybook/test';
@@ -36,7 +35,14 @@ BasicInputTypes.args = {
     firstName: {
       label: 'First Name',
       type: 'text',
-      // defaultValue: 'John',
+      defaultValue: 'John',
+      inputProps: {
+        placeholder: 'Enter your first name',
+      },
+      validation: {
+        required: { value: true, message: 'This field is required' },
+        minLength: { value: 3, message: 'Minimum length is 3' },
+      },
     },
     lastName: {
       label: 'Last Name',
@@ -52,6 +58,9 @@ BasicInputTypes.args = {
       label: 'Age',
       type: 'number',
       // defaultValue: 30,
+      inputProps: {
+        disabled: true,
+      },
     },
     subscribe: {
       label: 'Subscribe to newsletter?',
@@ -75,6 +84,9 @@ AdvancedInputTypes.args = {
       label: 'Start Date',
       type: 'date',
       defaultValue: '2023-11-20',
+      validation: {
+        required: { value: true, message: 'Start date is required' },
+      },
     },
     startTime: {
       label: 'Start Time',
@@ -116,16 +128,6 @@ AdvancedInputTypes.args = {
       type: 'switch',
       defaultValue: true,
     },
-    favoriteFruit: {
-      label: 'Favorite Fruit',
-      type: 'combobox',
-      defaultValue: 'Apple',
-      options: [
-        { value: 'Apple', label: 'Apple' },
-        { value: 'Banana', label: 'Banana' },
-        { value: 'Orange', label: 'Orange' },
-      ],
-    },
   },
   onSubmit: (data) => {
     console.log('🚀 ~ file: DynamicForm.stories.tsx ~ data:', data);
@@ -864,3 +866,69 @@ CustomInput.args = {
   onFormReady: fn(),
 };
 CustomInput.storyName = 'Custom Input (ColorPicker)';
+
+// Story 8: ComboBox Input
+// Mock data for ComboBox
+const mockComboBoxData = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'watermelon', label: 'Watermelon' },
+  { value: 'pineapple', label: 'Pineapple' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'blueberry', label: 'Blueberry' },
+  { value: 'raspberry', label: 'Raspberry' },
+];
+
+// Mock search API function for ComboBox
+const mockSearchApi = async (params: { query: string }) => {
+  return new Promise<{ data: { value: string; label: string }[] }>(
+    (resolve) => {
+      setTimeout(() => {
+        const filteredData = mockComboBoxData.filter((item) =>
+          item.label.toLowerCase().includes(params.query.toLowerCase())
+        );
+        resolve({ data: filteredData });
+      }, 500); // Simulate 500ms delay
+    }
+  );
+};
+
+export const ComboBoxInput = Template.bind({});
+ComboBoxInput.args = {
+  theme: defaultTheme,
+  config: {
+    favoriteFruit: {
+      label: 'Favorite Fruit',
+      type: 'combobox',
+      inputProps: {
+        placeholder: 'Search for a fruit...',
+        searchApi: mockSearchApi,
+        noResultsMessage: 'No fruits found.',
+        loadingMessage: 'Loading fruits...',
+        disabled: false,
+        required: true,
+      },
+      validation: {
+        validate: (value) => {
+          console.log('🚀 ~ file: DynamicForm.stories.tsx ~ value:', value);
+          if (!value) {
+            return 'This field is required';
+          }
+          if (value.length < 3) {
+            return 'Please select at least 3 fruits';
+          }
+          return undefined;
+        },
+      },
+    },
+  },
+  onSubmit: (data) => {
+    console.log('🚀 ~ file: DynamicForm.stories.tsx ~ data:', data);
+    alert(JSON.stringify(data));
+  },
+  onFormReady: fn(),
+};
+ComboBoxInput.storyName = 'ComboBox Input';

src/DynamicForm.tsx

@@ -1,4 +1,3 @@
-// Filepath: /src/DynamicForm.tsx
 import React, { useMemo } from 'react';
 import {
   useDynamicForm,

src/components/DraggableControl/DraggableItem.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { DraggableItemProps } from './types';
+import { useDrag, useDrop } from 'react-dnd';
+import { DraggableItemWrapper } from './styled';
+
+const ItemType = {
+  ITEM: 'ITEM',
+} as const;
+
+interface DragItem<T> {
+  index: number;
+  item: T;
+}
+
+const DraggableItem = <T,>({
+  item,
+  index,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  renderItem,
+}: DraggableItemProps<T>) => {
+  const isDisabled = (item as any).disabled;
+
+  const [{ isDragging }, dragRef] = useDrag<
+    DragItem<T>,
+    unknown,
+    { isDragging: boolean }
+  >({
+    type: ItemType.ITEM,
+    item: { index, item },
+    canDrag: !isDisabled,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [{ isOver }, dropRef] = useDrop<
+    DragItem<T>,
+    unknown,
+    { isOver: boolean }
+  >({
+    accept: ItemType.ITEM,
+    canDrop: () => !isDisabled,
+    hover: (draggedItem) => {
+      if (draggedItem.index !== index && !isDisabled) {
+        onDragOver(index);
+      }
+    },
+    drop: onDrop,
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+    }),
+  });
+
+  const combinedRef = (node: HTMLDivElement | null) => {
+    dragRef(dropRef(node));
+  };
+
+  return (
+    <DraggableItemWrapper
+      ref={combinedRef}
+      isDisabled={isDisabled}
+      isDragging={isDragging}
+      isOver={isOver}
+      onDragStart={() => !isDisabled && onDragStart(index)}
+    >
+      {renderItem(item, index)}
+    </DraggableItemWrapper>
+  );
+};
+
+export default DraggableItem;

src/components/DraggableControl/hooks.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect, useRef } from 'react';
+
+export const useDraggableList = <T extends { disabled?: boolean }>(
+  initialItems: T[],
+  sortBy?: keyof T
+) => {
+  const [items, setItems] = useState<T[]>(initialItems);
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+  const isSortedInitially = useRef(false);
+
+  useEffect(() => {
+    if (!isSortedInitially.current && sortBy) {
+      let sortedItems = [...initialItems];
+
+      sortedItems = sortedItems.sort((a, b) => {
+        const fieldA = a[sortBy];
+        const fieldB = b[sortBy];
+
+        if (fieldA < fieldB) return -1;
+        if (fieldA > fieldB) return 1;
+        return 0;
+      });
+
+      setItems(sortedItems);
+      isSortedInitially.current = true;
+    } else {
+      setItems(initialItems);
+    }
+  }, [initialItems, sortBy]);
+
+  const onDragStart = (index: number) => {
+    if (items[index].disabled) return;
+    setDraggingIndex(index);
+  };
+
+  const onDragOver = (index: number) => {
+    if (
+      draggingIndex === null ||
+      draggingIndex === index ||
+      items[index].disabled
+    )
+      return;
+
+    const updatedItems = [...items];
+    const [draggedItem] = updatedItems.splice(draggingIndex, 1);
+    updatedItems.splice(index, 0, draggedItem);
+    setDraggingIndex(index);
+    setItems(updatedItems);
+  };
+
+  const onDrop = () => {
+    setDraggingIndex(null);
+  };
+
+  return {
+    items,
+    setItems,
+    onDragStart,
+    onDragOver,
+    onDrop,
+  };
+};

src/components/DraggableControl/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { DraggableListProps } from './types';
+import { useDraggableList } from './hooks';
+import DraggableItem from './DraggableItem';
+import { ListContainer } from './styled';
+import ScrollArea from '../ScrollArea';
+
+const DraggableList = <T extends { id?: string }>({
+  items,
+  onUpdate,
+  renderItem,
+  sortBy,
+}: DraggableListProps<T>) => {
+  const {
+    items: sortedItems,
+    onDragStart,
+    onDragOver,
+    onDrop,
+  } = useDraggableList(items, sortBy);
+
+  const handleDrop = () => {
+    onUpdate(sortedItems);
+  };
+
+  return (
+    <ScrollArea>
+      <ListContainer>
+        {sortedItems.map((item, index) => (
+          <DraggableItem
+            key={item.id}
+            item={item}
+            index={index}
+            renderItem={renderItem}
+            onDragStart={() => onDragStart(index)}
+            onDragOver={() => onDragOver(index)}
+            onDrop={handleDrop}
+          />
+        ))}
+      </ListContainer>
+    </ScrollArea>
+  );
+};
+
+export default DraggableList;

src/components/DraggableControl/styled.ts

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+
+export const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const DraggableItemWrapper = styled.div<{
+  isDisabled?: boolean;
+  isDragging?: boolean;
+  isOver?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'move')};
+  opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};
+  transition: all 0.3s ease;
+
+  ${({ isDragging }) =>
+    isDragging &&
+    `
+    opacity: 0.5;
+    background: rgba(0, 0, 0, 0.05);
+  `}
+
+  ${({ isOver }) =>
+    isOver &&
+    `
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #0066cc;
+    }
+  `}
+`;
+
+export const DragHandle = styled.div`
+  margin-right: 8px;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+
+export const CustomDragLayerWrapper = styled.div`
+  position: fixed;
+  pointer-events: none;
+  z-index: 1000;
+  opacity: 0.9;
+`;