feat: interface-select-content UI & landing UI changes added

gimnathperera · Sep 11, 2023 · f7cec3c · f7cec3c
1 parent b298a96
commit f7cec3c
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 96 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;