Merge pull request #20 from trilogy-group/feature/param-dropdown

Feature/param dropdown

src/components/editor/Editor.tsx

@@ -64,7 +64,7 @@ const Editor: React.FC = () => {
           selectedComponent,
         )
         let panelCode = await generatePanel(components, fileName)
-        const response = await API.post('/save-file', {
+        await API.post('/save-file', {
           codeBody: code,
           ocTsxBody: ocTsxCode,
           jsonBody: components,

src/components/inspector/controls/FormControl.tsx

@@ -5,6 +5,7 @@ import {
   Grid,
   Box,
 } from '@chakra-ui/react'
+import ParamSelector from '~custom-components/paramSelector'
 
 type FormControlPropType = {
   label: ReactNode
@@ -37,6 +38,8 @@ const FormControl: React.FC<FormControlPropType> = ({
     >
       {label}
     </FormLabel>
+    <ParamSelector prop={htmlFor} />
+
     <Box
       display="flex"
       alignItems="center"

src/components/inspector/controls/HuesPickerControl.tsx

@@ -7,6 +7,7 @@ import {
   Box,
   Slider,
 } from '@chakra-ui/react'
+import ParamSelector from '~custom-components/paramSelector'
 
 type HuesPickerPropType = {
   name: string
@@ -23,6 +24,7 @@ const HuesPickerControl = (props: HuesPickerPropType) => {
 
   return (
     <>
+      <ParamSelector prop={props.name} />
       <Grid mb={2} templateColumns="repeat(5, 1fr)" gap={0}>
         {Object.keys(props.themeColors).map(colorName =>
           props.gradient ? (

src/components/inspector/controls/TextControl.tsx

@@ -21,11 +21,9 @@ const TextControl: React.FC<TextControlPropsType> = ({
 }) => {
   const { setValueFromEvent } = useForm()
   const value = usePropsSelector(name)
-
   return (
     <FormControl hasColumn={hasColumn} htmlFor={name} label={label}>
       <Input
-        borderRadius="md"
         autoComplete="off"
         id={name}
         name={name}

src/components/inspector/panels/CustomPropsPanel.tsx

@@ -14,8 +14,14 @@ import {
   Input,
   ButtonGroup,
   Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  InputRightAddon,
+  Portal,
 } from '@chakra-ui/react'
-import { EditIcon, SmallCloseIcon } from '@chakra-ui/icons'
+import { ChevronDownIcon, EditIcon, SmallCloseIcon } from '@chakra-ui/icons'
 import useDispatch from '~hooks/useDispatch'
 import { useForm } from '~hooks/useForm'
 
@@ -72,33 +78,53 @@ const CustomPropsPanel = () => {
           }
         }}
       >
-        <InputGroup size="sm">
-          <Input
-            ref={inputRef}
-            isInvalid={hasError}
-            value={quickProps.name}
-            placeholder={`prop`}
-            onChange={(event: ChangeEvent<HTMLInputElement>) =>
-              setQuickProps({ ...quickProps, name: event.target.value })
-            }
-          />
+        <Input
+          size="sm"
+          ref={inputRef}
+          isInvalid={hasError}
+          value={quickProps.name}
+          placeholder={`prop`}
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            setQuickProps({ ...quickProps, name: event.target.value })
+          }
+        />
+        <InputGroup size="sm" my={1}>
           <Input
             isInvalid={hasError}
             value={quickProps.value}
             placeholder={`value`}
             onChange={(event: ChangeEvent<HTMLInputElement>) =>
               setQuickProps({ ...quickProps, value: event.target.value })
             }
-            ml={1}
           />
+          <InputRightAddon>
+            <Menu>
+              <MenuButton type="button">
+                <ChevronDownIcon />
+              </MenuButton>
+              <Portal>
+                <MenuList>
+                  {params?.map((param: string) => (
+                    <MenuItem
+                      key={param}
+                      onClick={() =>
+                        setQuickProps({ ...quickProps, value: param })
+                      }
+                    >
+                      {param}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </Portal>
+            </Menu>
+          </InputRightAddon>
         </InputGroup>
         <Flex>
           <Button
             mr={0}
             type="submit"
             size="xs"
             variant="outline"
-            mt={0.5}
             width="100%"
             bgColor="lightblue"
           >

src/components/inspector/panels/ParametersPanel.tsx

@@ -19,6 +19,7 @@ import {
   MenuItem,
   Tooltip,
   InputRightAddon,
+  Portal,
 } from '@chakra-ui/react'
 import {
   ChevronDownIcon,
@@ -30,6 +31,8 @@ import useDispatch from '~hooks/useDispatch'
 import { useParamsForm } from '~hooks/useParamsForm'
 import { getSelectedCustomComponentId } from '~core/selectors/customComponents'
 
+const paramTypes = ['string', 'number', 'boolean', 'Function', 'any']
+
 const ParametersPanel = () => {
   const dispatch = useDispatch()
   const inputRef = useRef<HTMLInputElement>(null)
@@ -89,7 +92,6 @@ const ParametersPanel = () => {
         <Flex direction="column">
           <InputGroup size="sm">
             <Input
-              mb={1}
               isInvalid={hasError}
               value={quickParams.type}
               placeholder={`type`}
@@ -103,43 +105,26 @@ const ParametersPanel = () => {
                 <MenuButton type="button">
                   <ChevronDownIcon />
                 </MenuButton>
-                <MenuList>
-                  <MenuItem
-                    onClick={() =>
-                      setQuickParams({ ...quickParams, type: 'string' })
-                    }
-                  >
-                    string
-                  </MenuItem>
-                  <MenuItem
-                    onClick={() =>
-                      setQuickParams({ ...quickParams, type: 'number' })
-                    }
-                  >
-                    number
-                  </MenuItem>
-                  <MenuItem
-                    onClick={() =>
-                      setQuickParams({ ...quickParams, type: 'boolean' })
-                    }
-                  >
-                    boolean
-                  </MenuItem>
-                  <MenuItem
-                    onClick={() =>
-                      setQuickParams({ ...quickParams, type: 'any' })
-                    }
-                  >
-                    any
-                  </MenuItem>
-                </MenuList>
+                <Portal>
+                  <MenuList>
+                    {paramTypes.map((type: string) => (
+                      <MenuItem
+                        key={type}
+                        onClick={() =>
+                          setQuickParams({ ...quickParams, type: type })
+                        }
+                      >
+                        {type}
+                      </MenuItem>
+                    ))}
+                  </MenuList>
+                </Portal>
               </Menu>
             </InputRightAddon>
           </InputGroup>
-          <Flex direction="row">
+          <Flex direction="row" mt={1}>
             <Input
               ref={inputRef}
-              mr={0.5}
               size="sm"
               isInvalid={hasError}
               value={quickParams.name}
@@ -149,7 +134,7 @@ const ParametersPanel = () => {
               }
             />
             <Input
-              ml={0.5}
+              ml={1}
               size="sm"
               isInvalid={hasError}
               value={quickParams.value}
@@ -182,19 +167,13 @@ const ParametersPanel = () => {
             </Checkbox>
             <Spacer />
           </Flex>
-          <Button
-            type="submit"
-            size="xs"
-            variant="outline"
-            my={0.5}
-            bgColor="lightblue"
-          >
+          <Button type="submit" size="xs" variant="outline" bgColor="lightblue">
             Save
           </Button>
         </Flex>
       </form>
 
-      {customParams && (
+      {customParams?.length ? (
         <SimpleGrid width="100%" columns={4} spacing={1} bgColor="yellow.100">
           <Box fontSize="sm" fontWeight="bold" pl={1}>
             Name
@@ -204,6 +183,8 @@ const ParametersPanel = () => {
           </Box>
           <Box fontSize="sm">Value</Box>
         </SimpleGrid>
+      ) : (
+        <></>
       )}
       {customParams?.map((paramsName: ParametersType, i: any) => (
         <Flex

src/components/inspector/panels/styles/DimensionPanel.tsx

@@ -24,7 +24,7 @@ const DimensionPanel = () => {
         <TextControl label="Max H" name="maxHeight" />
       </SimpleGrid>
 
-      <FormControl label="Overflow">
+      <FormControl label="Overflow" htmlFor="overflow">
         <Select
           size="sm"
           value={overflow || ''}

src/components/inspector/panels/styles/DisplayPanel.tsx

@@ -11,7 +11,7 @@ const DisplayPanel = () => {
 
   return (
     <>
-      <FormControl label="Display">
+      <FormControl label="Display" htmlFor="display">
         <Select
           size="sm"
           value={display || ''}

src/components/inspector/panels/styles/EffectsPanel.tsx

@@ -20,7 +20,7 @@ const EffectsPanel = () => {
 
   return (
     <>
-      <FormControl label="Opacity">
+      <FormControl label="Opacity" htmlFor="opacity">
         <Slider
           min={1}
           onChange={(value: any) => setValue('opacity', value / 100)}

src/components/inspector/panels/styles/FlexPanel.tsx

@@ -13,7 +13,7 @@ const FlexPanel = () => {
 
   return (
     <>
-      <FormControl label="Direction">
+      <FormControl label="Direction" htmlFor="flexDirection">
         <Select
           name="flexDirection"
           size="sm"
@@ -27,7 +27,7 @@ const FlexPanel = () => {
         </Select>
       </FormControl>
 
-      <FormControl label="Justify content">
+      <FormControl label="Justify content" htmlFor="justifyContent">
         <Select
           name="justifyContent"
           size="sm"
@@ -42,7 +42,7 @@ const FlexPanel = () => {
         </Select>
       </FormControl>
 
-      <FormControl label="Align items">
+      <FormControl label="Align items" htmlFor="alignItems">
         <Select
           name="alignItems"
           size="sm"

src/custom-components/paramSelector.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverAnchor,
+  ListIcon,
+  ListItem,
+  List,
+  Portal,
+} from '@chakra-ui/react'
+import { ChevronLeftIcon } from '@chakra-ui/icons'
+import { useSelector } from 'react-redux'
+import { getComponentParamNames } from '~core/selectors/components'
+import { MdCheckCircle } from 'react-icons/md'
+import { IoMdRadioButtonOff } from 'react-icons/io'
+import { useForm } from '~hooks/useForm'
+import usePropsSelector from '~hooks/usePropsSelector'
+
+const ParamSelector = ({ prop }: any) => {
+  const params = useSelector(getComponentParamNames)
+  const { setValue } = useForm()
+  const value = usePropsSelector(prop)
+  return (
+    <span>
+      <Popover placement="left" trigger="hover">
+        <PopoverTrigger>
+          <ChevronLeftIcon />
+        </PopoverTrigger>
+        <Portal>
+          <PopoverContent>
+            <PopoverArrow />
+            <PopoverCloseButton />
+            <PopoverHeader>Select parameter</PopoverHeader>
+            <PopoverBody>
+              <List>
+                {params?.map((param: string) => (
+                  <ListItem
+                    onClick={() => setValue(prop, param)}
+                    key={param}
+                    px={1}
+                    _hover={{ bg: 'teal.100' }}
+                  >
+                    {param}
+                  </ListItem>
+                ))}
+              </List>
+            </PopoverBody>
+          </PopoverContent>
+        </Portal>
+      </Popover>
+    </span>
+  )
+}
+
+export default ParamSelector

src/pages/api/refresh.js

@@ -10,7 +10,6 @@ function getComponentWithLocation(path) {
 
 async function getJsons() {
   let jsons = {}
-  // TODO: Change this later to the root without any dependecy on gitpod.yml, BIT or tiui-react-oc
   const files = glob.sync(`../remote/**/*.oc.json`, {})
   files.forEach(element => {
     const { comp, dir } = getComponentWithLocation(element)