From f7cec3c62fdb1c9491c73be7cc7c639aca78c9bf Mon Sep 17 00:00:00 2001
From: Gimnath-Perera <gimnathperera@gmail.com>
Date: Mon, 11 Sep 2023 09:46:20 +0530
Subject: [PATCH 1/2] feat: interface-select-content UI & landing UI changes
 added

---
 app/page.tsx                                  | 19 +----
 components/header/index.tsx                   | 38 +--------
 components/interface-select-content/index.tsx | 85 ++++++++++---------
 components/interface-select-modal/index.tsx   |  8 +-
 config/constants.ts                           |  4 +
 utils/generate-mocks/index.ts                 |  4 +-
 6 files changed, 62 insertions(+), 96 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index b2daa4e..eaa75c7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,32 +11,21 @@ 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(['1']));
-
-  const selectedInterfaces = useRef<string[] | null>(null);
+  const detectedInterfaces = useRef<string[] | null>(null);
 
   const handleOnGenerate = (): void => {
     const interfaceNamesToMock = extractInterfaceNames(code);
-    selectedInterfaces.current = interfaceNamesToMock;
+    detectedInterfaces.current = interfaceNamesToMock;
     onOpen();
   };
 
-  // TODO: fix any type here
-  const handleOnRowCountChange = (newRowCount: any): void => {
-    setNumberOfRows(newRowCount);
-  };
-
   const handleOnCodeChange = (newCode: string): void => {
     setCode(newCode);
   };
 
   return (
     <section className='h-full'>
-      <Header
-        onGenerate={handleOnGenerate}
-        numberOfRows={numberOfRows}
-        onRowCountChange={handleOnRowCountChange}
-      />
+      <Header onGenerate={handleOnGenerate} />
       <div className='flex justify-center gap-6 h-[calc(100vh-12rem)]'>
         <CodeEditor onCodeChange={handleOnCodeChange} initialCode={code} />
         <Result />
@@ -45,7 +34,7 @@ const Home: FC = () => {
       <InterfaceSelectModal
         isOpen={isOpen}
         onOpenChange={onOpenChange}
-        selectedInterfaces={selectedInterfaces.current}
+        detectedInterfaces={detectedInterfaces.current}
       />
     </section>
   );
diff --git a/components/header/index.tsx b/components/header/index.tsx
index 5eecca9..d2daf66 100644
--- a/components/header/index.tsx
+++ b/components/header/index.tsx
@@ -1,51 +1,17 @@
 import React, { FC } from 'react';
-import {
-  Dropdown,
-  DropdownTrigger,
-  DropdownMenu,
-  DropdownItem,
-  Button,
-  Selection,
-} from '@nextui-org/react';
+import { Button } from '@nextui-org/react';
 
 type Props = {
   onGenerate: () => void;
-  onRowCountChange: (rowCount: Selection) => void;
-  numberOfRows: any;
 };
 
-const Header: FC<Props> = ({ onGenerate, onRowCountChange, numberOfRows }) => {
-  const selectedValue = React.useMemo(
-    () => Array.from(numberOfRows).join(', ').replaceAll('_', ' '),
-    [numberOfRows],
-  );
-
+const Header: FC<Props> = ({ onGenerate }) => {
   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 𝔽𝕒𝕜𝕖 Data
       </h1>
       <div className='flex items-center gap-4'>
-        <Dropdown>
-          <DropdownTrigger>
-            <Button variant='bordered' className='capitalize'>
-              {`#️⃣ Scale [${selectedValue} of row${Number(selectedValue) > 1 ? 's' : ''}]`}
-            </Button>
-          </DropdownTrigger>
-          <DropdownMenu
-            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>
-          </DropdownMenu>
-        </Dropdown>
-
         <Button color='primary' variant='shadow' onClick={onGenerate}>
           🪄 Generate
         </Button>
diff --git a/components/interface-select-content/index.tsx b/components/interface-select-content/index.tsx
index 5500ef1..9c50c4d 100644
--- a/components/interface-select-content/index.tsx
+++ b/components/interface-select-content/index.tsx
@@ -1,23 +1,19 @@
 import React, { FC, useState } from 'react';
-import { Listbox, ListboxItem } from '@nextui-org/react';
 import { Chip } from '@nextui-org/react';
+import { Colors } from '@/config/constants';
+import { Listbox, ListboxItem, Radio, RadioGroup } from '@nextui-org/react';
 
-const InterfaceSelectContent: FC = () => {
-  const [selectedKeys, setSelectedKeys] = useState<Set<string> | any>(new Set(['text']));
+interface Props {
+  detectedInterfaces: string[];
+}
+
+const InterfaceSelectContent: FC<Props> = ({ detectedInterfaces }) => {
+  const [interfaces, setInterfaces] = useState<Set<string> | any>(new Set(detectedInterfaces));
 
-  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);
+    if (interfaces.size === 1) return;
+    const newSelectedKeys = new Set(Array.from(interfaces).filter(key => key !== closedInterface));
+    setInterfaces(newSelectedKeys);
   };
 
   return (
@@ -27,33 +23,44 @@ const InterfaceSelectContent: FC = () => {
         variant='flat'
         disallowEmptySelection
         selectionMode='multiple'
-        selectedKeys={selectedKeys}
-        onSelectionChange={setSelectedKeys}
+        selectedKeys={interfaces}
+        onSelectionChange={setInterfaces}
       >
-        <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>
+        {detectedInterfaces?.map((interfaceName: any) => (
+          <ListboxItem key={interfaceName}>{`⚡ ${interfaceName}`}</ListboxItem>
+        )) || null}
       </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 className='mb-4'>
+        <p className='mb-3'>Selected interfaces </p>
+        <div className='flex flex-wrap gap-2 items-center'>
+          {Array.from(interfaces).map((interfaceName: any, index: number) => (
+            <Chip
+              size='sm'
+              radius='full'
+              variant='flat'
+              key={interfaceName}
+              onClose={(): void => handleChipClose(interfaceName)}
+              classNames={{
+                base: Colors.ChipClors[index % Colors.ChipClors.length],
+                content: 'text-white',
+              }}
+            >
+              {interfaceName}
+            </Chip>
+          ))}
+        </div>
       </div>
+      {interfaces.size === 1 ? (
+        <RadioGroup
+          label={<p className='text-white'>Scale number of rows</p>}
+          orientation='horizontal'
+        >
+          <Radio value='1'>1 Row</Radio>
+          <Radio value='10'>10 Rows</Radio>
+          <Radio value='50'>50 Rows</Radio>
+        </RadioGroup>
+      ) : null}
     </div>
   );
 };
diff --git a/components/interface-select-modal/index.tsx b/components/interface-select-modal/index.tsx
index 9603e05..c1e5c0d 100644
--- a/components/interface-select-modal/index.tsx
+++ b/components/interface-select-modal/index.tsx
@@ -11,12 +11,12 @@ import InterfaceSelectContent from '@/components/interface-select-content';
 
 interface Props {
   isOpen: boolean;
-  selectedInterfaces: string[] | null;
+  detectedInterfaces: string[] | null;
   onOpenChange: () => void;
 }
 
-const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, selectedInterfaces }) => {
-  console.log('🚀 ~ file: index.tsx:18 ~ selectedInterfaces:', selectedInterfaces);
+const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, detectedInterfaces }) => {
+  console.log('🚀 ~ file: index.tsx:18 ~ detectedInterfaces:', detectedInterfaces);
 
   return (
     <>
@@ -29,7 +29,7 @@ const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, selectedInterfa
               </ModalHeader>
               <ModalBody>
                 <p>Please select the interfaces you want to generate mock data for.</p>
-                <InterfaceSelectContent />
+                <InterfaceSelectContent detectedInterfaces={detectedInterfaces ?? []} />
               </ModalBody>
               <ModalFooter>
                 <Button color='danger' variant='bordered' onPress={onClose}>
diff --git a/config/constants.ts b/config/constants.ts
index eadad29..51bca4b 100644
--- a/config/constants.ts
+++ b/config/constants.ts
@@ -33,3 +33,7 @@ export const RegexExp = {
   InterfaceName: /interface\s+(\w+)/g,
   Interface: /interface\s+(\w+)\s*{[^}]*}/gs,
 };
+
+export const Colors = {
+  ChipClors: ['bg-primary', 'bg-secondary', 'bg-warning', 'bg-danger', 'bg-default'],
+};
diff --git a/utils/generate-mocks/index.ts b/utils/generate-mocks/index.ts
index 5fff4d4..9015428 100644
--- a/utils/generate-mocks/index.ts
+++ b/utils/generate-mocks/index.ts
@@ -2,13 +2,13 @@ import { mock } from 'intermock';
 
 export const generateMocks = (
   code: string,
-  selectedInterfaces: string[],
+  detectedInterfaces: string[],
 ): string | Record<string | number, {}> => {
   const mockedData = mock({
     language: 'typescript',
     files: [['docs', code]],
     output: 'string',
-    interfaces: selectedInterfaces,
+    interfaces: detectedInterfaces,
   });
 
   return mockedData;

From 00192db14733fdbf315eb2882860798726eb7a6f Mon Sep 17 00:00:00 2001
From: Gimnath-Perera <gimnathperera@gmail.com>
Date: Tue, 12 Sep 2023 09:22:46 +0530
Subject: [PATCH 2/2] feat: mock integration added

---
 app/page.tsx                                  | 34 +++++++-
 components/interface-select-content/index.tsx | 32 ++++++--
 components/interface-select-modal/index.tsx   | 34 ++++++--
 components/result/index.tsx                   | 79 ++-----------------
 config/constants.ts                           | 28 +++----
 types/index.ts                                |  2 +
 6 files changed, 101 insertions(+), 108 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index eaa75c7..248a089 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,18 +4,31 @@ import { useDisclosure } from '@nextui-org/react';
 import CodeEditor from '@/components/code-editor';
 import Header from '@/components/header';
 import Result from '@/components/result';
-import { extractInterfaceNames } from '@/utils';
+import { extractInterfaceNames, generateMocks } from '@/utils';
 import { Initials } from '@/config/constants';
 import InterfaceSelectModal from '@/components/interface-select-modal';
+import { RowNumber } from '@/types';
 
 const Home: FC = () => {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
-  const [code, setCode] = useState<string>(Initials.DefaultInterface);
   const detectedInterfaces = useRef<string[] | null>(null);
+  const mockResult = useRef<string | null>(JSON.stringify(Initials.DefaultMockResult));
+  const [code, setCode] = useState<string>(Initials.DefaultInterface);
+  const [numberOfRows, setNumberOfRows] = useState<RowNumber>('1');
+  const [interfaces, setInterfaces] = useState<Set<string> | any>(
+    new Set(detectedInterfaces?.current),
+  );
+
+  const handleChipClose = (closedInterface: string): void => {
+    if (interfaces.size === 1) return;
+    const newSelectedKeys = new Set(Array.from(interfaces)?.filter(key => key !== closedInterface));
+    setInterfaces(newSelectedKeys);
+  };
 
   const handleOnGenerate = (): void => {
     const interfaceNamesToMock = extractInterfaceNames(code);
     detectedInterfaces.current = interfaceNamesToMock;
+    setInterfaces(new Set(interfaceNamesToMock));
     onOpen();
   };
 
@@ -23,18 +36,31 @@ const Home: FC = () => {
     setCode(newCode);
   };
 
+  const handleOnMockGenerate = (): void => {
+    const generatedMocks = generateMocks(code, Array.from(interfaces));
+    mockResult.current = JSON.stringify(generatedMocks, null, 2);
+
+    onOpenChange();
+  };
+
   return (
     <section className='h-full'>
       <Header onGenerate={handleOnGenerate} />
       <div className='flex justify-center gap-6 h-[calc(100vh-12rem)]'>
         <CodeEditor onCodeChange={handleOnCodeChange} initialCode={code} />
-        <Result />
+        <Result mockResult={mockResult?.current ?? ''} />
       </div>
 
       <InterfaceSelectModal
         isOpen={isOpen}
-        onOpenChange={onOpenChange}
         detectedInterfaces={detectedInterfaces.current}
+        numberOfRows={numberOfRows}
+        onOpenChange={onOpenChange}
+        onMockGenerate={handleOnMockGenerate}
+        setNumberOfRows={setNumberOfRows}
+        interfaces={interfaces}
+        setInterfaces={setInterfaces}
+        handleChipClose={handleChipClose}
       />
     </section>
   );
diff --git a/components/interface-select-content/index.tsx b/components/interface-select-content/index.tsx
index 9c50c4d..fd28b95 100644
--- a/components/interface-select-content/index.tsx
+++ b/components/interface-select-content/index.tsx
@@ -1,19 +1,33 @@
-import React, { FC, useState } from 'react';
+import React, { FC, Key } from 'react';
 import { Chip } from '@nextui-org/react';
 import { Colors } from '@/config/constants';
 import { Listbox, ListboxItem, Radio, RadioGroup } from '@nextui-org/react';
+import { RowNumber } from '@/types';
 
 interface Props {
   detectedInterfaces: string[];
+  interfaces: Set<string>;
+  numberOfRows: RowNumber;
+  setInterfaces: (keys: Set<Key>) => void;
+  handleChipClose: (closedInterface: string) => void;
+  setNumberOfRows: (numberOfRows: RowNumber) => void;
 }
 
-const InterfaceSelectContent: FC<Props> = ({ detectedInterfaces }) => {
-  const [interfaces, setInterfaces] = useState<Set<string> | any>(new Set(detectedInterfaces));
+const InterfaceSelectContent: FC<Props> = ({
+  detectedInterfaces,
+  numberOfRows,
+  setNumberOfRows,
+  interfaces,
+  setInterfaces,
+  handleChipClose,
+}) => {
+  const handleNumberOfRowsChange = (value: string): void => {
+    setNumberOfRows(value as RowNumber);
+  };
 
-  const handleChipClose = (closedInterface: string): void => {
-    if (interfaces.size === 1) return;
-    const newSelectedKeys = new Set(Array.from(interfaces).filter(key => key !== closedInterface));
-    setInterfaces(newSelectedKeys);
+  const handleInterfaceChange = (selectedInterfaces: Set<Key>): void => {
+    if (selectedInterfaces?.size > 1) setNumberOfRows('1');
+    setInterfaces(selectedInterfaces);
   };
 
   return (
@@ -24,7 +38,7 @@ const InterfaceSelectContent: FC<Props> = ({ detectedInterfaces }) => {
         disallowEmptySelection
         selectionMode='multiple'
         selectedKeys={interfaces}
-        onSelectionChange={setInterfaces}
+        onSelectionChange={(keys): void => handleInterfaceChange(new Set(keys))}
       >
         {detectedInterfaces?.map((interfaceName: any) => (
           <ListboxItem key={interfaceName}>{`⚡ ${interfaceName}`}</ListboxItem>
@@ -55,6 +69,8 @@ const InterfaceSelectContent: FC<Props> = ({ detectedInterfaces }) => {
         <RadioGroup
           label={<p className='text-white'>Scale number of rows</p>}
           orientation='horizontal'
+          value={numberOfRows}
+          onValueChange={handleNumberOfRowsChange}
         >
           <Radio value='1'>1 Row</Radio>
           <Radio value='10'>10 Rows</Radio>
diff --git a/components/interface-select-modal/index.tsx b/components/interface-select-modal/index.tsx
index c1e5c0d..6fa8723 100644
--- a/components/interface-select-modal/index.tsx
+++ b/components/interface-select-modal/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Key } from 'react';
 import {
   Modal,
   ModalContent,
@@ -8,16 +8,31 @@ import {
   Button,
 } from '@nextui-org/react';
 import InterfaceSelectContent from '@/components/interface-select-content';
+import { RowNumber } from '@/types';
 
 interface Props {
   isOpen: boolean;
   detectedInterfaces: string[] | null;
+  numberOfRows: RowNumber;
+  interfaces: Set<string>;
   onOpenChange: () => void;
+  setNumberOfRows: (numberOfRows: RowNumber) => void;
+  setInterfaces: (keys: Set<Key>) => void;
+  handleChipClose: (closedInterface: string) => void;
+  onMockGenerate: () => void;
 }
 
-const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, detectedInterfaces }) => {
-  console.log('🚀 ~ file: index.tsx:18 ~ detectedInterfaces:', detectedInterfaces);
-
+const InterfaceSelectModal: FC<Props> = ({
+  isOpen,
+  detectedInterfaces,
+  numberOfRows,
+  interfaces,
+  setNumberOfRows,
+  onOpenChange,
+  setInterfaces,
+  handleChipClose,
+  onMockGenerate,
+}) => {
   return (
     <>
       <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -29,13 +44,20 @@ const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, detectedInterfa
               </ModalHeader>
               <ModalBody>
                 <p>Please select the interfaces you want to generate mock data for.</p>
-                <InterfaceSelectContent detectedInterfaces={detectedInterfaces ?? []} />
+                <InterfaceSelectContent
+                  detectedInterfaces={detectedInterfaces ?? []}
+                  numberOfRows={numberOfRows}
+                  setNumberOfRows={setNumberOfRows}
+                  interfaces={interfaces}
+                  setInterfaces={setInterfaces}
+                  handleChipClose={handleChipClose}
+                />
               </ModalBody>
               <ModalFooter>
                 <Button color='danger' variant='bordered' onPress={onClose}>
                   Close
                 </Button>
-                <Button color='primary' onPress={onClose}>
+                <Button color='primary' onPress={onMockGenerate}>
                   🪄 Generate
                 </Button>
               </ModalFooter>
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 673ecc3..200d3e6 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -2,82 +2,19 @@
 import { FC } from 'react';
 import { Button } from '@nextui-org/react';
 
-const Result: FC = () => {
-  const str = `
-  [
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-  ]
-  `;
+interface Props {
+  mockResult: string;
+}
 
+const Result: FC<Props> = ({ mockResult }) => {
   return (
     <div className='relative bg-[#1E1E1E] rounded-lg py-2 pl-8 pr-2 w-1/2'>
       <div className='h-full overflow-auto'>
+        {/* <pre>{JSON.parse(mockResult)}</pre> */}
         <pre className='text-[#ced4da]'>
-          <code className='p-2 rounded-md shadow-sm text-sm font-mono italic'>{str}</code>
+          <code className='p-2 rounded-md shadow-sm text-sm font-mono italic'>
+            {JSON.parse(mockResult)}
+          </code>
         </pre>
       </div>
       <div className='absolute bottom-4 right-7'>
diff --git a/config/constants.ts b/config/constants.ts
index 51bca4b..b965be9 100644
--- a/config/constants.ts
+++ b/config/constants.ts
@@ -1,32 +1,22 @@
 export const Initials = {
   DefaultInterface: `// You can use typescript interfaces like following; 
 
-    interface Admin extends User {
-      adminRecord: AdminRecord;
-    }
-    
-    interface Student extends User {
-      schoolRecord: SchoolRecord;
-    }
-    
     interface User {
       firstName: string;
       lastName: string;
       username: string;
       emailAddress: string;
     }
-    
-    interface AdminRecord {
-      studentsPassedEachYear: number[];
-    }
-    
-    interface SchoolRecord {
-      startDate: string;
-      endDate: string;
-      isActive: boolean;
-      grades: number[];
-    }
     `,
+
+  DefaultMockResult: `{
+    User: {
+      firstName: "Kenny",
+      lastName: "Goodwin",
+      username: "Jessie97",
+      emailAddress: "Agustina92@yahoo.com"
+    }
+  }`,
 };
 
 export const RegexExp = {
diff --git a/types/index.ts b/types/index.ts
index e7735f0..4a6029f 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -3,3 +3,5 @@ import { SVGProps } from 'react';
 export type IconSvgProps = SVGProps<SVGSVGElement> & {
   size?: number;
 };
+
+export type RowNumber = '1' | '10' | '50';