feat(v2/logic): render empty and populated logic page, add mobile variant of builder sidebar

frontend/src/components/Badge/index.ts

@@ -1 +1,2 @@
+export type { BadgeProps } from './Badge'
 export { Badge as default } from './Badge'

frontend/src/components/Footer/Footer.tsx

@@ -103,7 +103,7 @@ export const Footer = ({
           ))}
         </Wrap>
       </Footer.Section>
-      <Divider color={`${textColorScheme}.300`} my="1.5rem" />
+      <Divider my="1.5rem" />
       <Footer.Section>
         <Box>
           <Text

frontend/src/features/admin-form/create/CreatePage.tsx

@@ -1,15 +1,25 @@
 import { Flex } from '@chakra-ui/react'
 
-import { CreatePageSidebar } from './common/components/BuilderSidebar'
+import {
+  CreatePageSidebar,
+  MobileCreatePageBottomBar,
+} from './common/components/BuilderSidebar'
 import { CreatePageContent } from './common/components/CreatePageContent'
 import { CreatePageDrawerProvider } from './CreatePageDrawerContext'
 
 export const CreatePage = (): JSX.Element => {
   return (
-    <Flex h="100%" w="100%" overflow="auto" bg="neutral.200" direction="row">
+    <Flex
+      h="100%"
+      w="100%"
+      overflow="auto"
+      bg="neutral.200"
+      direction={{ base: 'column', md: 'row' }}
+    >
       <CreatePageDrawerProvider>
         <CreatePageSidebar />
         <CreatePageContent />
+        <MobileCreatePageBottomBar />
       </CreatePageDrawerProvider>
     </Flex>
   )

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent.tsx

@@ -37,20 +37,20 @@ export const BuilderAndDesignContent = ({
   }, [clearActiveField, clearFieldToCreate])
 
   return (
-    <Flex flex={1} bg="neutral.200">
+    <Flex flex={1} bg="neutral.200" overflow="auto">
       <Flex
-        m="2rem"
+        m={{ base: 0, md: '2rem' }}
         mb={0}
         flex={1}
-        bg="primary.100"
-        p="2.5rem"
+        bg={{ base: 'secondary.100', md: 'primary.100' }}
+        p={{ base: '1.5rem', md: '2.5rem' }}
         justify="center"
         overflow="auto"
       >
         <Flex
           h="fit-content"
           bg="white"
-          p="2.5rem"
+          p={{ base: 0, md: '2.5rem' }}
           maxW="57rem"
           w="100%"
           flexDir="column"

frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/BuilderAndDesignDrawer.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { Flex } from '@chakra-ui/react'
 import { AnimatePresence } from 'framer-motion'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import { MotionBox } from '~components/motion'
 
 import {
@@ -32,7 +33,8 @@ const DRAWER_MOTION_PROPS = {
   },
 }
 
-export const BuilderAndDesignDrawer = (): JSX.Element => {
+export const BuilderAndDesignDrawer = (): JSX.Element | null => {
+  const isMobile = useIsMobile()
   const { isShowDrawer, activeTab } = useCreatePageDrawer()
   const activeField = useEditFieldStore(activeFieldSelector)
 
@@ -51,6 +53,9 @@ export const BuilderAndDesignDrawer = (): JSX.Element => {
     }
   }, [activeField, activeTab])
 
+  // Do not display in mobile
+  if (isMobile) return null
+
   return (
     <AnimatePresence>
       {isShowDrawer ? (

frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/CreateFieldDrawer/CreateFieldOption.tsx

@@ -4,7 +4,7 @@ import { Box, BoxProps, forwardRef, Icon, Stack, Text } from '@chakra-ui/react'
 
 import { BasicField } from '~shared/types/field'
 
-import { FIELDS_TO_CREATE_META } from '../../../constants'
+import { BASICFIELD_TO_DRAWER_META } from '~features/admin-form/create/constants'
 
 interface FieldOptionProps extends BoxProps {
   isActive?: boolean
@@ -58,7 +58,10 @@ export const DraggableCreateFieldOption = ({
 
 export const CreateFieldOption = forwardRef<FieldOptionProps, 'button'>(
   ({ fieldType, isDisabled, isActive, ...props }, ref) => {
-    const meta = useMemo(() => FIELDS_TO_CREATE_META[fieldType], [fieldType])
+    const meta = useMemo(
+      () => BASICFIELD_TO_DRAWER_META[fieldType],
+      [fieldType],
+    )
 
     return (
       <Box

frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx

@@ -6,12 +6,13 @@ import { BasicField, FormFieldDto } from '~shared/types/field'
 
 import IconButton from '~components/IconButton'
 
+import { BASICFIELD_TO_DRAWER_META } from '~features/admin-form/create/constants'
+
 import {
   activeFieldSelector,
   clearActiveFieldSelector,
   useEditFieldStore,
 } from '../../../editFieldStore'
-import { transformBasicFieldToText } from '../../../utils'
 import { CreatePageDrawerCloseButton } from '../CreatePageDrawerCloseButton'
 
 import { EditCheckbox } from './EditCheckbox'
@@ -22,7 +23,10 @@ export const EditFieldDrawer = (): JSX.Element | null => {
   const activeField = useEditFieldStore(activeFieldSelector)
 
   const basicFieldText = useMemo(
-    () => transformBasicFieldToText(activeField?.fieldType),
+    () =>
+      activeField?.fieldType
+        ? BASICFIELD_TO_DRAWER_META[activeField.fieldType].label
+        : '',
     [activeField?.fieldType],
   )
 

frontend/src/features/admin-form/create/builder-and-design/components/FieldRow/FieldRowContainer.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback, useMemo } from 'react'
 import { Draggable } from 'react-beautiful-dnd'
 import { FormProvider, useForm } from 'react-hook-form'
-import { BiDuplicate, BiGridHorizontal, BiTrash } from 'react-icons/bi'
+import { BiDuplicate, BiEdit, BiGridHorizontal, BiTrash } from 'react-icons/bi'
 import { useIsMutating } from 'react-query'
 import {
   Box,
@@ -15,6 +15,7 @@ import {
 
 import { BasicField, FormFieldDto } from '~shared/types/field'
 
+import { useIsMobile } from '~hooks/useIsMobile'
 import IconButton from '~components/IconButton'
 import CheckboxField from '~templates/Field/Checkbox'
 
@@ -36,6 +37,8 @@ export const FieldRowContainer = ({
   field,
   index,
 }: FieldRowContainerProps): JSX.Element => {
+  const isMobile = useIsMobile()
+
   const updateActiveField = useEditFieldStore(updateFieldSelector)
   const activeField = useEditFieldStore(activeFieldSelector)
   const numFormFieldMutations = useIsMutating(adminFormFieldKeys.base)
@@ -74,6 +77,7 @@ export const FieldRowContainer = ({
         <Box
           _first={{ pt: 0 }}
           _last={{ pb: 0 }}
+          m="0.75rem"
           py="1.25rem"
           {...provided.draggableProps}
           ref={provided.innerRef}
@@ -132,7 +136,7 @@ export const FieldRowContainer = ({
               </chakra.button>
             </Fade>
             <Box
-              p="1.5rem"
+              p={{ base: '0.75rem', md: '1.5rem' }}
               pt={0}
               w="100%"
               pointerEvents={isActive ? undefined : 'none'}
@@ -145,11 +149,19 @@ export const FieldRowContainer = ({
             </Box>
             <Collapse in={isActive} style={{ width: '100%' }}>
               <Flex
-                px="1.5rem"
+                px={{ base: '0.75rem', md: '1.5rem' }}
                 flex={1}
                 borderTop="1px solid var(--chakra-colors-neutral-300)"
-                justify="end"
+                justify={{ base: 'space-between', md: 'end' }}
               >
+                {isMobile ? (
+                  <IconButton
+                    variant="clear"
+                    colorScheme="secondary"
+                    aria-label="Edit field"
+                    icon={<BiEdit fontSize="1.25rem" />}
+                  />
+                ) : null}
                 <ButtonGroup
                   variant="clear"
                   colorScheme="secondary"

frontend/src/features/admin-form/create/builder-and-design/constants.ts

@@ -1,27 +1,3 @@
-import {
-  BiAlignLeft,
-  BiBuilding,
-  BiCalculator,
-  BiCalendarEvent,
-  BiCaretDownSquare,
-  BiCloudUpload,
-  BiHash,
-  BiHeading,
-  BiImage,
-  BiMailSend,
-  BiMobile,
-  BiPhone,
-  BiRadioCircleMarked,
-  BiRename,
-  BiSelectMultiple,
-  BiStar,
-  BiTable,
-  BiText,
-  BiToggleLeft,
-  BiUser,
-} from 'react-icons/bi'
-import { As } from '@chakra-ui/react'
-
 import { BasicField } from '~shared/types/field'
 
 const ALL_FIELDS_ORDERED = [
@@ -57,108 +33,3 @@ export const CREATE_FIELD_DROP_ID = 'create-fields-field'
 
 export const FIELD_LIST_DROP_ID = 'formFieldList'
 export const PENDING_CREATE_FIELD_ID = 'FIELD-PENDING-CREATION'
-
-export const FIELDS_TO_CREATE_META: Record<
-  BasicField,
-  { label: string; icon: As }
-> = {
-  [BasicField.Image]: {
-    label: 'Image',
-    icon: BiImage,
-  },
-
-  [BasicField.Statement]: {
-    label: 'Paragraph',
-    icon: BiText,
-  },
-
-  [BasicField.Section]: {
-    label: 'Header',
-    icon: BiHeading,
-  },
-
-  [BasicField.Attachment]: {
-    label: 'Attachment',
-    icon: BiCloudUpload,
-  },
-
-  [BasicField.Checkbox]: {
-    label: 'Checkbox',
-    icon: BiSelectMultiple,
-  },
-
-  [BasicField.Date]: {
-    label: 'Date',
-    icon: BiCalendarEvent,
-  },
-
-  [BasicField.Decimal]: {
-    label: 'Decimal',
-    icon: BiCalculator,
-  },
-
-  [BasicField.Dropdown]: {
-    label: 'Dropdown',
-    icon: BiCaretDownSquare,
-  },
-
-  [BasicField.Email]: {
-    label: 'Email',
-    icon: BiMailSend,
-  },
-
-  [BasicField.HomeNo]: {
-    label: 'Home Number',
-    icon: BiPhone,
-  },
-
-  [BasicField.LongText]: {
-    label: 'Long answer',
-    icon: BiAlignLeft,
-  },
-
-  [BasicField.Mobile]: {
-    label: 'Mobile number',
-    icon: BiMobile,
-  },
-
-  [BasicField.Nric]: {
-    label: 'NRIC',
-    icon: BiUser,
-  },
-
-  [BasicField.Number]: {
-    label: 'Number',
-    icon: BiHash,
-  },
-
-  [BasicField.Radio]: {
-    label: 'Radio',
-    icon: BiRadioCircleMarked,
-  },
-
-  [BasicField.Rating]: {
-    label: 'Rating',
-    icon: BiStar,
-  },
-
-  [BasicField.ShortText]: {
-    label: 'Short answer',
-    icon: BiRename,
-  },
-
-  [BasicField.Table]: {
-    label: 'Table',
-    icon: BiTable,
-  },
-
-  [BasicField.Uen]: {
-    label: 'UEN',
-    icon: BiBuilding,
-  },
-
-  [BasicField.YesNo]: {
-    label: 'Yes/No',
-    icon: BiToggleLeft,
-  },
-}

frontend/src/features/admin-form/create/builder-and-design/utils.ts

@@ -1,15 +1,9 @@
 import { BasicField } from '~shared/types/field'
 
-import { FIELDS_TO_CREATE_META, PENDING_CREATE_FIELD_ID } from './constants'
-import { BuilderContentField, PendingFormField } from './types'
+import { BASICFIELD_TO_DRAWER_META } from '../constants'
 
-/**
- * Maps BasicField enums to their human-readable field type string
- */
-export const transformBasicFieldToText = (basicField?: BasicField): string => {
-  if (!basicField) return ''
-  return FIELDS_TO_CREATE_META[basicField].label
-}
+import { PENDING_CREATE_FIELD_ID } from './constants'
+import { BuilderContentField, PendingFormField } from './types'
 
 export const isPendingFormField = (
   field: BuilderContentField,
@@ -31,7 +25,7 @@ export const getFieldCreationMeta = (
     description: '',
     disabled: false,
     required: true,
-    title: transformBasicFieldToText(fieldType),
+    title: BASICFIELD_TO_DRAWER_META[fieldType].label,
     _id: PENDING_CREATE_FIELD_ID,
   }