Merge pull request #2286 from MahtabBukhari/Blueprint_add_color_wheel…

…_and_modal [Blueprint] - Add color wheel and modal ( in progress )
stakwork · Oct 3, 2024 · 11199e3 · 11199e3
2 parents 514d084 + e596137
commit 11199e3
Show file tree

Hide file tree

Showing 7 changed files with 299 additions and 23 deletions.
diff --git a/public/svg-icons/ColorPickerIcon.svg b/public/svg-icons/ColorPickerIcon.svg
diff --git a/src/components/Icons/ColorPickerIcon.tsx b/src/components/Icons/ColorPickerIcon.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react'
+
+const ColorPickerIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 8 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.5884 4.12155L3.88306 2.41429C3.8396 2.37079 3.80894 2.32471 3.79108 2.27605C3.77323 2.22738 3.7643 2.17524 3.7643 2.11963C3.7643 2.06401 3.77323 2.01206 3.79108 1.96379C3.80894 1.91553 3.8396 1.86964 3.88306 1.82614L5.5884 0.118886C5.63185 0.0753881 5.67788 0.0446995 5.72649 0.0268199C5.7751 0.00894031 5.82719 0 5.88275 0C5.9383 0 5.99019 0.00894031 6.0384 0.0268199C6.08662 0.0446995 6.13245 0.0753881 6.1759 0.118886L7.88125 1.82614C7.9247 1.86964 7.95536 1.91573 7.97321 1.96439C7.99107 2.01306 8 2.0652 8 2.12081C8 2.17643 7.99107 2.22838 7.97321 2.27664C7.95536 2.32491 7.9247 2.37079 7.88125 2.41429L6.1759 4.12155C6.13245 4.16505 6.08642 4.19574 6.03781 4.21362C5.9892 4.23149 5.93711 4.24043 5.88155 4.24043C5.826 4.24043 5.77412 4.23149 5.7259 4.21362C5.67768 4.19574 5.63185 4.16505 5.5884 4.12155ZM0 3.21787V0.804477C0 0.68544 0.0402151 0.585661 0.120645 0.505141C0.201076 0.424621 0.300743 0.384361 0.419648 0.384361H2.83035C2.94925 0.384361 3.04891 0.424621 3.12934 0.505141C3.20977 0.585661 3.24999 0.68544 3.24999 0.804477V3.21787C3.24999 3.3369 3.20977 3.43668 3.12934 3.5172C3.04891 3.59772 2.94925 3.63798 2.83035 3.63798H0.419648C0.300743 3.63798 0.201076 3.59772 0.120645 3.5172C0.0402151 3.43668 0 3.3369 0 3.21787ZM4.35715 7.57988V5.16649C4.35715 5.04746 4.39737 4.94768 4.4778 4.86716C4.55823 4.78664 4.65789 4.74638 4.77679 4.74638H7.18749C7.3064 4.74638 7.40607 4.78664 7.4865 4.86716C7.56693 4.94768 7.60714 5.04746 7.60714 5.16649V7.57988C7.60714 7.69892 7.56693 7.7987 7.4865 7.87922C7.40607 7.95974 7.3064 8 7.18749 8H4.77679C4.65789 8 4.55823 7.95974 4.4778 7.87922C4.39737 7.7987 4.35715 7.69892 4.35715 7.57988ZM0 7.57988V5.16649C0 5.04746 0.0402151 4.94768 0.120645 4.86716C0.201076 4.78664 0.300743 4.74638 0.419648 4.74638H2.83035C2.94925 4.74638 3.04891 4.78664 3.12934 4.86716C3.20977 4.94768 3.24999 5.04746 3.24999 5.16649V7.57988C3.24999 7.69892 3.20977 7.7987 3.12934 7.87922C3.04891 7.95974 2.94925 8 2.83035 8H0.419648C0.300743 8 0.201076 7.95974 0.120645 7.87922C0.0402151 7.7987 0 7.69892 0 7.57988Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default ColorPickerIcon
diff --git a/...lueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx b/...lueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable no-nested-ternary */
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+
+import { colors } from '~/utils/colors'
+
+export const ColorPicker = () => (
+  <Wrapper direction="column" justify="flex-end">
+    <TableWrapper align="center" justify="center">
+      <p>this is color wrapper</p>
+    </TableWrapper>
+  </Wrapper>
+)
+
+const Wrapper = styled(Flex)`
+  flex: 1;
+
+  .title {
+    font-size: 20px;
+    color: ${colors.white};
+    font-family: Barlow;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+
+  .subtitle {
+    color: ${colors.GRAY3};
+    font-family: Barlow;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  & .filters {
+    overflow-x: auto;
+  }
+
+  .load-more {
+    margin: 8px auto;
+    align-self: center;
+  }
+`
+
+const TableWrapper = styled(Flex)`
+  min-height: 0;
+  overflow: auto;
+  flex: 1;
+  width: 100%;
+`
diff --git a/...sContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx b/...sContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx
@@ -0,0 +1,125 @@
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import * as React from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
+import { ColorPicker } from './ColorPicker'
+
+interface TabPanelProps {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props
+
+  return value === index ? (
+    <TabPanelWrapper
+      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      role="tabpanel"
+      {...other}
+    >
+      {children}
+    </TabPanelWrapper>
+  ) : null
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  }
+}
+
+export const ColorPickerPopoverView = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
+
+  const tabs = [{ label: 'Color', component: ColorPicker }]
+
+  return (
+    <Wrapper direction="column">
+      <StyledTabs aria-label="color picker" onChange={handleChange} value={value}>
+        {tabs.map((tab, index) => (
+          <StyledTab key={tab.label} color={colors.white} disableRipple label={tab.label} {...a11yProps(index)} />
+        ))}
+      </StyledTabs>
+
+      {tabs.map((tab, index) => (
+        <TabPanel key={tab.label} index={index} value={value}>
+          <tab.component />
+        </TabPanel>
+      ))}
+    </Wrapper>
+  )
+}
+
+const StyledTabs = styled(Tabs)`
+  && {
+    background: ${colors.modalBg};
+    border-radius: 9px 9px 0 0;
+    .MuiTabs-indicator {
+      width: 40px;
+      background: ${colors.primaryBlue};
+    }
+  }
+`
+
+const StyledTab = styled(Tab)`
+  && {
+    padding: 20px 0 20px;
+    color: ${colors.GRAY6};
+    margin-left: 30px;
+    font-family: Barlow;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    &.Mui-selected {
+      color: ${colors.white};
+    }
+  }
+`
+
+const TabPanelWrapper = styled(Flex)`
+  display: flex;
+  flex: 1;
+  min-height: 572px;
+  padding: 20px 0;
+  max-height: 572px;
+  overflow: auto;
+
+  @media (max-width: 1024px) {
+    width: 100%;
+    min-height: 400px;
+    max-height: 400px;
+  }
+
+  @media (max-width: 768px) {
+    width: 100%;
+    min-height: 300px;
+    max-height: 300px;
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+    min-height: 250px;
+    max-height: 250px;
+  }
+`
+
+const Wrapper = styled(Flex)`
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    padding: 3px;
+  }
+`
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx
@@ -0,0 +1,36 @@
+import { ColorPickerPopoverView } from './ColorPickerPopoverView'
+import styled from 'styled-components'
+import { colors } from '~/utils'
+
+type Props = {
+  isOpen: boolean
+}
+
+export const ColorPickerPopover = ({ isOpen }: Props) => (
+  <ModalBackground isOpen={isOpen}>
+    <ModalContent>
+      <ColorPickerPopoverView />
+    </ModalContent>
+  </ModalBackground>
+)
+
+const ModalBackground = styled.div<{ isOpen: boolean }>`
+  display: ${(props) => (props.isOpen ? 'block' : 'none')};
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+`
+
+const ModalContent = styled.div`
+  position: fixed;
+  top: 38%;
+  left: 34%;
+  transform: translate(-50%, -50%);
+  background: ${colors.BG1};
+  width: 300px;
+  height: 443px;
+  z-index: 1001;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+`
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
@@ -19,6 +19,8 @@ import { colors } from '~/utils'
 import { CreateCustomNodeAttribute } from './CustomAttributesStep'
 import MediaOptions from './MediaOptions'
 import { convertAttributes, parsedObjProps, parseJson } from './utils'
+import ColorPickerIcon from '~/components/Icons/ColorPickerIcon'
+import { ColorPickerPopover } from './ColorPickerPopover'
 
 const defaultValues = {
   type: '',
@@ -209,6 +211,10 @@ export const Editor = ({
     sourceLink: false,
   })
 
+  const [isPopoverOpen, setPopoverOpen] = useState(!!selectedSchema)
+
+  const handleColorPickerPopover = () => setPopoverOpen(!isPopoverOpen)
+
   useEffect(
     () => () => {
       reset()
@@ -244,6 +250,8 @@ export const Editor = ({
     resetForm()
 
     if (selectedSchema) {
+      setPopoverOpen(true)
+
       setValue('type', selectedSchema.type as string)
       setValue('parent', selectedSchema.parent)
 
@@ -473,7 +481,6 @@ export const Editor = ({
                     <Flex mb={12}>
                       <Text>Select Parent</Text>
                     </Flex>
-
                     <AutoComplete
                       isLoading={parentsLoading}
                       onSelect={(e) => {
@@ -483,23 +490,32 @@ export const Editor = ({
                       options={parentOptions}
                       selectedValue={resolvedParentValue()}
                     />
+
                     {displayParentError && <StyledError>A parent type must be selected</StyledError>}
                   </Flex>
+
                   <Flex>
                     <Flex mb={12}>
                       <Text>Type name</Text>
                     </Flex>
                     <Flex mb={12}>
-                      <TextInput
-                        id="cy-item-name"
-                        maxLength={250}
-                        name="type"
-                        placeholder="Enter type name"
-                        rules={{
-                          ...requiredRule,
-                        }}
-                        value={parent}
-                      />
+                      <InputIconWrapper>
+                        <InputWrapper>
+                          <TextInput
+                            id="cy-item-name"
+                            maxLength={250}
+                            name="type"
+                            placeholder="Enter type name"
+                            rules={{
+                              ...requiredRule,
+                            }}
+                            value={parent}
+                          />
+                        </InputWrapper>
+                        <ColorPickerIconWrapper onClick={handleColorPickerPopover}>
+                          <ColorPickerIcon />
+                        </ColorPickerIconWrapper>
+                      </InputIconWrapper>
                     </Flex>
                   </Flex>
                 </>
@@ -510,18 +526,25 @@ export const Editor = ({
                       <Text>Name</Text>
                     </Flex>
                     <Flex mb={12}>
-                      <TextInput
-                        dataTestId="cy-item-name"
-                        defaultValue={selectedSchema?.type}
-                        id="cy-item-name"
-                        maxLength={250}
-                        name="type"
-                        placeholder="Enter type name"
-                        rules={{
-                          ...requiredRule,
-                        }}
-                        value={parent}
-                      />
+                      <InputIconWrapper>
+                        <InputWrapper>
+                          <TextInput
+                            dataTestId="cy-item-name"
+                            defaultValue={selectedSchema?.type}
+                            id="cy-item-name"
+                            maxLength={250}
+                            name="type"
+                            placeholder="Enter type name"
+                            rules={{
+                              ...requiredRule,
+                            }}
+                            value={parent}
+                          />
+                        </InputWrapper>
+                        <ColorPickerIconWrapper onClick={handleColorPickerPopover}>
+                          <ColorPickerIcon />
+                        </ColorPickerIconWrapper>
+                      </InputIconWrapper>
                     </Flex>
                   </Flex>
                   <Flex mb={12}>
@@ -601,6 +624,7 @@ export const Editor = ({
             </Flex>
           </form>
         </FormProvider>
+        <ColorPickerPopover isOpen={isPopoverOpen} />
       </Flex>
     </Flex>
   )
@@ -685,3 +709,25 @@ const HeaderText = styled(Text)`
   text-align: left;
   color: ${colors.white};
 `
+
+const ColorPickerIconWrapper = styled.span`
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  margin-left: 12px;
+  color: ${colors.colorPickerThing};
+  background: ${colors.THING};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const InputIconWrapper = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+`
+
+const InputWrapper = styled(Flex)`
+  width: 320px;
+`
diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx
@@ -5,6 +5,7 @@ export const colors = {
   bluePressState: 'rgb(57, 97, 220)',
   addAttributeBtn: 'rgba(107, 122, 141, 0.25)',
   blueTextAccent: 'rgb(130, 180, 255)',
+  colorPickerThing: 'rgba(255, 158, 239, 1)',
   body: 'rgb(21, 30, 39)',
   boostBg1: 'rgb(32, 63, 62)',
   budgetExplanationModalBg: 'rgb(21, 28, 35)',