feat: selected-interfaces UI addded

app/page.tsx

@@ -1,24 +1,31 @@
 'use client';
-import { FC, useState } from 'react';
+import { FC, useRef, useState } from 'react';
+import { useDisclosure } from '@nextui-org/react';
 import CodeEditor from '@/components/code-editor';
 import Header from '@/components/header';
 import Result from '@/components/result';
-import { extractInterfaces, extractInterfaceNames } from '@/utils';
+import { extractInterfaceNames } from '@/utils';
 import { Initials } from '@/config/constants';
+import InterfaceSelectModal from '@/components/interface-select-modal';
 
 const Home: FC = () => {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const [code, setCode] = useState<string>(Initials.DefaultInterface);
-  const [numberOfRows, setNumberOfRows] = useState(new Set(['10']));
+  const [numberOfRows, setNumberOfRows] = useState(new Set(['1']));
+
+  const selectedInterfaces = useRef<string[] | null>(null);
 
   const handleOnGenerate = (): void => {
-    console.log('names*********', extractInterfaceNames(code));
-    console.log('total*********', extractInterfaces(code));
+    const interfaceNamesToMock = extractInterfaceNames(code);
+    selectedInterfaces.current = interfaceNamesToMock;
+    onOpen();
   };
 
   // TODO: fix any type here
   const handleOnRowCountChange = (newRowCount: any): void => {
     setNumberOfRows(newRowCount);
   };
+
   const handleOnCodeChange = (newCode: string): void => {
     setCode(newCode);
   };
@@ -34,6 +41,12 @@ const Home: FC = () => {
         <CodeEditor onCodeChange={handleOnCodeChange} initialCode={code} />
         <Result />
       </div>
+
+      <InterfaceSelectModal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        selectedInterfaces={selectedInterfaces.current}
+      />
     </section>
   );
 };

components/header/index.tsx

@@ -23,26 +23,26 @@ const Header: FC<Props> = ({ onGenerate, onRowCountChange, numberOfRows }) => {
   return (
     <div className='pb-6 text-center flex items-center justify-between'>
       <h1 className='tracking-tight inline font-semibold text-[2.3rem] lg:text-3xl'>
-        Generate Fake Data
+        Generate 𝔽𝕒𝕜𝕖 Data
       </h1>
       <div className='flex items-center gap-4'>
         <Dropdown>
           <DropdownTrigger>
             <Button variant='bordered' className='capitalize'>
-              {`#️⃣ Scale [${selectedValue} of rows]`}
+              {`#️⃣ Scale [${selectedValue} of row${Number(selectedValue) > 1 ? 's' : ''}]`}
             </Button>
           </DropdownTrigger>
           <DropdownMenu
-            aria-label='Single selection example'
+            aria-label='row-count-select'
             variant='flat'
             disallowEmptySelection
             selectionMode='single'
             selectedKeys={numberOfRows}
             onSelectionChange={onRowCountChange}
           >
+            <DropdownItem key='1'>1</DropdownItem>
             <DropdownItem key='10'>10</DropdownItem>
             <DropdownItem key='50'>50</DropdownItem>
-            <DropdownItem key='100'>100</DropdownItem>
           </DropdownMenu>
         </Dropdown>
 

components/interface-select-content/index.tsx

@@ -0,0 +1,61 @@
+import React, { FC, useState } from 'react';
+import { Listbox, ListboxItem } from '@nextui-org/react';
+import { Chip } from '@nextui-org/react';
+
+const InterfaceSelectContent: FC = () => {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string> | any>(new Set(['text']));
+
+  const backgroundColors: string[] = [
+    'bg-primary',
+    'bg-secondary',
+    'bg-warning',
+    'bg-danger',
+    'bg-default',
+  ];
+  const handleChipClose = (closedInterface: string): void => {
+    if (selectedKeys.size === 1) return;
+    const newSelectedKeys = new Set(
+      Array.from(selectedKeys).filter(key => key !== closedInterface),
+    );
+    setSelectedKeys(newSelectedKeys);
+  };
+
+  return (
+    <div className='flex flex-col gap-2'>
+      <Listbox
+        aria-label='Multiple selection example'
+        variant='flat'
+        disallowEmptySelection
+        selectionMode='multiple'
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys}
+      >
+        <ListboxItem key='text'>⚡ Text</ListboxItem>
+        <ListboxItem key='number'>⚡ Number</ListboxItem>
+        <ListboxItem key='date'>⚡ Date</ListboxItem>
+        <ListboxItem key='single_date'>⚡ Single Date</ListboxItem>
+        <ListboxItem key='iteration'>⚡ Iteration</ListboxItem>
+      </Listbox>
+      <div className='flex flex-wrap gap-2 items-center'>
+        <p className='text-small text-default-500'>Selected interfaces: </p>
+        {Array.from(selectedKeys).map((selectedInterface: any, index: number) => (
+          <Chip
+            size='sm'
+            radius='full'
+            variant='flat'
+            key={selectedInterface}
+            onClose={(): void => handleChipClose(selectedInterface)}
+            classNames={{
+              base: backgroundColors[index % backgroundColors.length],
+              content: 'text-white',
+            }}
+          >
+            {selectedInterface}
+          </Chip>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default InterfaceSelectContent;

components/interface-select-modal/index.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from '@nextui-org/react';
+import InterfaceSelectContent from '@/components/interface-select-content';
+
+interface Props {
+  isOpen: boolean;
+  selectedInterfaces: string[] | null;
+  onOpenChange: () => void;
+}
+
+const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, selectedInterfaces }) => {
+  console.log('🚀 ~ file: index.tsx:18 ~ selectedInterfaces:', selectedInterfaces);
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose): any => (
+            <>
+              <ModalHeader className='flex flex-col gap-1'>
+                Following 𝕀𝕟𝕥𝕖𝕣𝕗𝕒𝕔𝕖𝕤 Detected
+              </ModalHeader>
+              <ModalBody>
+                <p>Please select the interfaces you want to generate mock data for.</p>
+                <InterfaceSelectContent />
+              </ModalBody>
+              <ModalFooter>
+                <Button color='danger' variant='bordered' onPress={onClose}>
+                  Close
+                </Button>
+                <Button color='primary' onPress={onClose}>
+                  🪄 Generate
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default InterfaceSelectModal;

package.json

@@ -22,7 +22,7 @@
     "@nextui-org/kbd": "2.0.8",
     "@nextui-org/link": "2.0.9",
     "@nextui-org/navbar": "2.0.9",
-    "@nextui-org/react": "^2.0.24",
+    "@nextui-org/react": "^2.1.10",
     "@nextui-org/snippet": "2.0.10",
     "@nextui-org/switch": "2.0.9",
     "@nextui-org/system": "2.0.5",

utils/generate-mocks/index.ts

@@ -0,0 +1,15 @@
+import { mock } from 'intermock';
+
+export const generateMocks = (
+  code: string,
+  selectedInterfaces: string[],
+): string | Record<string | number, {}> => {
+  const mockedData = mock({
+    language: 'typescript',
+    files: [['docs', code]],
+    output: 'string',
+    interfaces: selectedInterfaces,
+  });
+
+  return mockedData;
+};

utils/index.ts

@@ -1,2 +1,2 @@
-export * from './extract-interfaces';
 export * from './extract-interface-names';
+export * from './generate-mocks';