Feat colors

package.json

@@ -17,6 +17,7 @@
         "@babel/core": "^7.16.0",
         "@babel/preset-env": "^7.16.0",
         "@babel/preset-typescript": "^7.16.0",
+        "@chakra-ui/icons": "^2.0.10",
         "@chakra-ui/react": "^1.6.7",
         "@emotion/react": "^11.4.0",
         "@emotion/styled": "^11.3.0",
@@ -35,6 +36,8 @@
         "babel-eslint": "10.1.0",
         "babel-jest": "^27.3.1",
         "babel-loader": "^8.2.2",
+        "bootstrap": "^5.2.2",
+        "chakra-ui-steps": "^1.7.4",
         "cpy-cli": "^3.1.1",
         "enzyme": "^3.11.0",
         "enzyme-to-json": "^3.6.2",

packages/chakra-ui-colors/src/Stepper/IconStepperContainer.tsx

@@ -0,0 +1,38 @@
+
+import React, { FC } from "react";
+import { Box, useColorMode, useColorModeValue } from '@chakra-ui/react'
+
+
+
+type Props = {
+
+}
+
+
+export const IconStepperContainer: FC<Props> = (props) => {
+    const colorMode = useColorModeValue('#E8EBF0', 'gray')
+    return (
+        <Box
+            boxSize='100%'
+            pos='relative'
+            marginLeft="-1.2em"
+            marginRight='1.2rem'
+            paddingLeft='1rem'
+            paddingBottom='0'
+
+            _after={{ content: `""`, position: "absolute", left: "calc(-7.5px)", top: "2.8em", width: "14px", height: "12px", borderLeft: `solid 2px ${colorMode}`, borderBottom: `solid 2px ${colorMode}`, borderRadius: "0 0 0 6px", zIndex: '1', borderEndColor: ` ${colorMode}`, borderLeftColor: ` ${colorMode}` }}
+        >{props.children}
+        </Box>
+
+
+    )
+}
+
+
+
+
+
+
+
+
+

packages/chakra-ui-colors/src/Stepper/StepperContainer.tsx

@@ -0,0 +1,45 @@
+
+import React, { FC } from "react";
+import { Box as PseudoBox, useColorMode, useColorModeValue } from '@chakra-ui/react'
+
+
+
+
+type Props = {
+
+}
+
+
+export const StepperContainer: FC<Props> = (props) => {
+    const colorMode = useColorModeValue('#E8EBF0', 'gray')
+
+    // , 'gray.200'
+    return (
+        <PseudoBox
+
+            boxSize='100%'
+            pos='relative'
+            marginLeft="-0.5em"
+            marginRight='1.2rem'
+            paddingLeft='0.3rem'
+            paddingBottom='0'
+            _before={{ content: `""`, position: "absolute", right: "100%", mt: '-0.5em', height: '111%', width: '2px', backgroundColor: colorMode }}
+            _after={{ content: `""`, position: "absolute", left: "calc(-1.9px)", top: "1.3em", width: "16px", height: "6px", borderLeft: `solid 2px ${colorMode}`, borderBottom: `solid 2px ${colorMode}`, borderRadius: "0 0 0 6px", borderEndColor: ` ${colorMode}`, borderLeftColor: ` ${colorMode}` }}
+            _last={{ _before: { height: "1.8em", mt: '-0.5em' } }}
+            _first={{ _before: { mt: '-0.8em', height: '130%', _after: { top: '2.5em' } } }}
+        >
+            {props.children}
+        </PseudoBox >
+
+
+    )
+}
+
+
+
+
+
+
+
+
+

packages/chakra-ui-colors/src/ThemeEditorColorItem.tsx

@@ -1,15 +1,21 @@
 import React, { FC, useCallback, useState, useEffect, useMemo } from 'react'
 import {
-  Box,
-  Flex,
-  BoxProps,
-  useColorModeValue,
-  Input,
-  Text,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
+    Box,
+    Flex,
+    BoxProps,
+    useColorModeValue,
+    Input,
+    Text,
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    PopoverBody,
+
+    Icon,
+    Tooltip,
+    useColorMode,
+    toast,
+    useToast
 } from '@chakra-ui/react'
 import { useDebouncyEffect } from 'use-debouncy'
 import { RgbaStringColorPicker } from 'react-colorful'
@@ -18,116 +24,163 @@ import namesPlugin from 'colord/plugins/names'
 import { COLOR_PICKER_TRANSPARENT_SAFE_BG_B64 } from './constants'
 import { ElementsHighlighter } from '@hypertheme-editor/chakra-ui-core'
 
+import { BiCopy } from 'react-icons/bi'
+
 extend([namesPlugin])
 
 export type ThemeEditorColorItemProps = {
-  title: string
-  value?: string
-  token: string
-  colorIndex: number
-  onChange: (value: { token: string; colorIndex: number; value: string }) => void
+    title: string
+    value?: string
+    token: string
+    colorIndex: number
+    onChange: (value: { token: string; colorIndex: number; value: string }) => void
 } & Omit<BoxProps, 'onChange'>
 
 const ThemeEditorColorItem: FC<ThemeEditorColorItemProps> = ({
-  p,
-  px,
-  title = 'Primary',
-  token,
-  colorIndex,
-  value,
-  onChange,
-  ...rest
+    p,
+    px,
+    title = 'Primary',
+    token,
+    colorIndex,
+    value,
+    onChange,
+    ...rest
 }) => {
-  const [currentValue, setCurrentValue] = useState<string | undefined>(value)
+    const [currentValue, setCurrentValue] = useState<string | undefined>(value)
+    const toast = useToast()
+
+    //copy function
+
+    //  
+
+    const rgbaString = useMemo(() => {
+        if (!currentValue) {
+            return '#ffffff'
+        }
+        return currentValue.startsWith('rgba') ? currentValue : colord(currentValue).toRgbString()
+    }, [currentValue])
+
+    const shadow = useColorModeValue('surface', 'surfaceDark')
+    const safeB64Bg = useColorModeValue(
+        COLOR_PICKER_TRANSPARENT_SAFE_BG_B64[0],
+        COLOR_PICKER_TRANSPARENT_SAFE_BG_B64[1]
+    )
+
+    const handleValueChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+        setCurrentValue(event.target.value)
 
-  const rgbaString = useMemo(() => {
-    if (!currentValue) {
-      return '#ffffff'
+    }, [])
+
+    useDebouncyEffect(
+        () => {
+            if (colord(currentValue as any).isValid() && currentValue !== value) {
+                onChange({ token, colorIndex, value: currentValue! })
+            }
+        },
+        500,
+        [currentValue]
+    )
+
+    useEffect(() => {
+        setCurrentValue(value)
+    }, [value])
+
+
+    const { colorMode } = useColorMode()
+
+    const copyToClipBoard = async () => {
+        if ("clipboard" in navigator) {
+            await navigator.clipboard.writeText(currentValue || '');
+            toast({
+                title: 'Copied!',
+                variant: 'success',
+                position: 'top-right',
+                duration: 2000
+            })
+        } else {
+            document.execCommand("copy", true, currentValue || '');
+        }
     }
-    return currentValue.startsWith('rgba') ? currentValue : colord(currentValue).toRgbString()
-  }, [currentValue])
-
-  const shadow = useColorModeValue('surface', 'surfaceDark')
-  const safeB64Bg = useColorModeValue(
-    COLOR_PICKER_TRANSPARENT_SAFE_BG_B64[0],
-    COLOR_PICKER_TRANSPARENT_SAFE_BG_B64[1]
-  )
-
-  const handleValueChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
-    setCurrentValue(event.target.value)
-  }, [])
-
-  useDebouncyEffect(
-    () => {
-      if (colord(currentValue as any).isValid() && currentValue !== value) {
-        onChange({ token, colorIndex, value: currentValue! })
-      }
-    },
-    500,
-    [currentValue]
-  )
-
-  useEffect(() => {
-    setCurrentValue(value)
-  }, [value])
-
-  return (
-    <Box w="100%" {...rest}>
-      <Text mb={1} p={p} px={px} fontSize="0.875rem" textTransform="capitalize">
-        {title}
-      </Text>
-      <Flex alignItems="center" p={p} px={px} pos="relative" minH="48px">
-        <Popover trigger="hover" placement="bottom-start">
-          <ElementsHighlighter themeKeys={`colors.${token}.${colorIndex}`}>
-            <PopoverTrigger>
-              <Box
-                borderRadius="full"
-                bgSize="cover"
-                bgImage={`url(data:image/png;base64,${safeB64Bg})`}
-                cursor="pointer"
-                transition="all 0.25s"
-                mr="0.75rem"
-                _hover={{
-                  shadow: 'md',
-                }}
-              >
-                <Box
-                  boxSize={8}
-                  bg={currentValue}
-                  shadow={shadow}
-                  border="3px solid"
-                  borderColor="rgba(220,220,220,0.4)"
-                  borderRadius="full"
-                  minW={8}
-                />
-              </Box>
-            </PopoverTrigger>
-          </ElementsHighlighter>
-          <PopoverContent w="min-content">
-            <PopoverBody p="0" w="min-content">
-              <RgbaStringColorPicker color={rgbaString} onChange={setCurrentValue} />
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
-        <ElementsHighlighter themeKeys={`colors.${token}.${colorIndex}`}>
-          <Input
-            w="100%"
-            size="sm"
-            borderRadius="6px"
-            shadow={shadow}
-            cursor="pointer"
-            px="0.5rem"
-            pos="sticky"
-            left="0"
-            value={currentValue}
-            onChange={handleValueChange}
-            fontSize="0.875rem"
-            placeholder="Color code"
-          />
-        </ElementsHighlighter>
-      </Flex>
-    </Box>
-  )
+
+
+    return (
+        <Box w="100%" {...rest} >
+            { /* <Text mb={1} p={p} px={px} fontSize="0.875rem" textTransform="capitalize">
+                {title} bgColor={colorMode === 'light' ? 'white' : '#1E1E2F'}
+            </Text>*/}
+            <Flex alignItems="center" p={p} px={px} pos="relative" minH="40px" width='100%' justifyContent='space-between'  >
+                <Popover trigger="hover" placement='bottom-start' >
+                    <ElementsHighlighter themeKeys={`colors.${token}.${colorIndex}`} >
+                        <PopoverTrigger >
+                            <Box
+                                borderRadius="full"
+                                bgSize="cover"
+                                bgImage={`url(data:image/png;base64,${safeB64Bg})`}
+                                cursor="pointer"
+                                transition="all 0.25s"
+                                // mr="0.75rem"
+                                _hover={{
+                                    shadow: 'md',
+                                }}
+
+                            >
+                                <Box
+                                    boxSize={8}
+                                    bg={currentValue}
+                                    shadow={shadow}
+                                    border="3px solid"
+                                    borderColor="rgba(220,220,220,0.4)"
+                                    borderRadius="full"
+                                    minW={8}
+                                />
+                            </Box>
+                        </PopoverTrigger>
+                    </ElementsHighlighter>
+                    <PopoverContent w="min-content" >
+                        <PopoverBody p="0" w="min-content" >
+                            <RgbaStringColorPicker color={rgbaString} onChange={setCurrentValue} />
+                        </PopoverBody>
+                    </PopoverContent>
+                </Popover>
+                <Text color='gray.500' mb={1} p={p} px={px} fontSize="0.875rem" textTransform="capitalize" >
+                    {colorIndex}
+                </Text>
+                <ElementsHighlighter themeKeys={`colors.${token}.${colorIndex}`}>
+                    <Input
+                        id="myInput"
+                        width='16.875rem'
+                        height='40px'
+                        variant='filled'
+                        //w="100%"
+
+                        size='sm'
+                        borderRadius="8px"
+                        // shadow={shadow}
+                        bgColor={colorMode == 'light' ? 'gray.200' : '#14141F'}
+                        cursor="pointer"
+                        px="0.5rem"
+                        pos="sticky"
+                        left="0"
+                        value={currentValue}
+
+                        onChange={handleValueChange}
+
+                        fontSize="0.875rem"
+                        placeholder="Color code"
+
+
+                    />
+                </ElementsHighlighter>
+
+                <Icon as={BiCopy} color={colorMode == 'light' ? 'gray' : 'white'} opacity='0.6' _hover={{ opacity: '0.8' }} _active={{ opacity: '1' }}
+                    onClick={copyToClipBoard}></Icon>
+
+
+
+
+            </Flex>
+        </Box>
+    )
 }
 
-export default ThemeEditorColorItem
+export default ThemeEditorColorItem;