diff --git a/package.json b/package.json index 8986d52..a933399 100644 --- a/package.json +++ b/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", diff --git a/packages/chakra-ui-colors/src/Stepper/IconStepperContainer.tsx b/packages/chakra-ui-colors/src/Stepper/IconStepperContainer.tsx new file mode 100644 index 0000000..9769d53 --- /dev/null +++ b/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) => { + const colorMode = useColorModeValue('#E8EBF0', 'gray') + return ( + {props.children} + + + + ) +} + + + + + + + + + diff --git a/packages/chakra-ui-colors/src/Stepper/StepperContainer.tsx b/packages/chakra-ui-colors/src/Stepper/StepperContainer.tsx new file mode 100644 index 0000000..b7fe749 --- /dev/null +++ b/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) => { + const colorMode = useColorModeValue('#E8EBF0', 'gray') + + // , 'gray.200' + return ( + + {props.children} + + + + ) +} + + + + + + + + + diff --git a/packages/chakra-ui-colors/src/ThemeEditorColorItem.tsx b/packages/chakra-ui-colors/src/ThemeEditorColorItem.tsx index 7fff665..5fa819c 100644 --- a/packages/chakra-ui-colors/src/ThemeEditorColorItem.tsx +++ b/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 const ThemeEditorColorItem: FC = ({ - p, - px, - title = 'Primary', - token, - colorIndex, - value, - onChange, - ...rest + p, + px, + title = 'Primary', + token, + colorIndex, + value, + onChange, + ...rest }) => { - const [currentValue, setCurrentValue] = useState(value) + const [currentValue, setCurrentValue] = useState(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 = 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 = 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 ( - - - {title} - - - - - - - - - - - - - - - - - - - - - - ) + + + return ( + + { /* + {title} bgColor={colorMode === 'light' ? 'white' : '#1E1E2F'} + */} + + + + + + + + + + + + + + + + + {colorIndex} + + + + + + + + + + + + + ) } -export default ThemeEditorColorItem +export default ThemeEditorColorItem; diff --git a/packages/chakra-ui-colors/src/ThemeEditorColors.tsx b/packages/chakra-ui-colors/src/ThemeEditorColors.tsx index c85225f..4adf96b 100644 --- a/packages/chakra-ui-colors/src/ThemeEditorColors.tsx +++ b/packages/chakra-ui-colors/src/ThemeEditorColors.tsx @@ -1,228 +1,344 @@ import React, { FC, useCallback, useMemo } from 'react' -import { Accordion } from '@chakra-ui/react' +import { Accordion, Box, Button, Circle, Icon, useColorMode, useColorModeValue } from '@chakra-ui/react' import { CgColorPicker } from 'react-icons/cg' import { - useThemeEditor, - useAccordionState, - ThemeEditorAccordionItem, - EmptyBox, - themeColorKeys, - ThemeEditorRootPanelProps, + useThemeEditor, + useAccordionState, + ThemeEditorAccordionItem, + EmptyBox, + themeColorKeys, + ThemeEditorRootPanelProps, } from '@hypertheme-editor/chakra-ui-core' import ThemeEditorPaletteColorItem from './ThemeEditorPaletteColorItem' import { ThemeEditorPalettePopoverForm } from './ThemeEditorPalettePopoverForm' import { generatePalette } from './generateColorPalette' import { COLOR_EXPANDED_INDEX_LOCAL_STORAGE_KEY } from './constants' -type Props = { - // -} & Partial +//my modifications +import { StepperContainer } from './Stepper/StepperContainer' +import { IconStepperContainer } from './Stepper/IconStepperContainer' +import { BiGridVertical } from 'react-icons/bi' +import { FaPlus } from 'react-icons/fa' + +type Props = {} & Partial export const ThemeEditorColors: FC = (props) => { - const { theme, setTheme } = useThemeEditor() - const [defaultIndex, setDefaultIndex] = useAccordionState(COLOR_EXPANDED_INDEX_LOCAL_STORAGE_KEY) + const { theme, setTheme } = useThemeEditor() + const [defaultIndex, setDefaultIndex] = useAccordionState(COLOR_EXPANDED_INDEX_LOCAL_STORAGE_KEY) - const handleChangeColor = useCallback( - ({ token, value }) => { - if (theme && theme.colors && theme.colors[token]) { - if (typeof theme.colors[token] === 'string' && theme.colors[token] !== value) { - try { - const newTheme = { - ...theme, - colors: { - ...theme.colors, - [token]: value, - }, - } as any - // setThemeSingleColor(token, value) - setTheme(newTheme) - } catch (error) { - // - } - } else { - try { - const newColorPalette = generatePalette(value) - const newTheme = { - ...theme, - colors: { - ...theme.colors, - [token]: newColorPalette, - }, - } as any - setTheme(newTheme) - } catch (error) { - // - } - } - } - }, - [setTheme, theme] - ) + const handleChangeColor = useCallback( + ({ token, value }) => { + if (theme && theme.colors && theme.colors[token]) { + if (typeof theme.colors[token] === 'string' && theme.colors[token] !== value) { + try { + const newTheme = { + ...theme, + colors: { + ...theme.colors, + [token]: value, + }, + } as any + // setThemeSingleColor(token, value) + setTheme(newTheme) + } catch (error) { + // + } + } else { + try { + const newColorPalette = generatePalette(value) + const newTheme = { + ...theme, + colors: { + ...theme.colors, + [token]: newColorPalette, + }, + } as any + setTheme(newTheme) + } catch (error) { + // + } + } + } + }, + [setTheme, theme] + ) - const handleDeleteCustomColor = useCallback( - (token: string) => { - if (theme?.colors && theme.colors[token]) { - const newThemeColors = { - ...theme?.colors, + const handleDeleteCustomColor = useCallback( + (token: string) => { + if (theme?.colors && theme.colors[token]) { + const newThemeColors = { + ...theme?.colors, + } + delete newThemeColors[token] + setTheme({ ...theme, colors: newThemeColors }) + } + }, + [setTheme, theme] + ) + + const customColorTokens = useMemo(() => { + if (!theme || !theme.colors) { + return [] } - delete newThemeColors[token] - setTheme({ ...theme, colors: newThemeColors }) - } - }, - [setTheme, theme] - ) - const customColorTokens = useMemo(() => { - if (!theme || !theme.colors) { - return [] - } + return Object.keys(theme.colors).filter((item) => themeColorKeys.indexOf(item) === -1) + }, [theme]) + + const { colorMode } = useColorMode() + const bgCircle = useColorModeValue('gray.300', 'gray.600') + return ( + + + + + + + } />} + > + {customColorTokens.map((item, index) => { + //added a box with the bi-grid icon + return ( + + + + + + + ) + })} + {customColorTokens.length == 0 ? ( + + themeColorKeys.indexOf(item) === -1) - }, [theme]) + triggerComponent={ + + } /> + + ) : ( + - return ( - - - {customColorTokens.map((item, index) => { - return ( - - ) - })} - {customColorTokens.length == 0 ? ( - - - - ) : ( - - )} - - - - - - - - - - - - - - - - - - - - - ) + Add + } /> + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx b/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx index b4347fb..151fc28 100644 --- a/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx +++ b/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx @@ -1,13 +1,13 @@ import React, { FC } from 'react' import { - BoxProps, - useColorModeValue, - Center, - Text, - SimpleGrid, - useDisclosure, - Tooltip, - SimpleGridProps, + BoxProps, + useColorModeValue, + Center, + Text, + SimpleGrid, + useDisclosure, + Tooltip, + SimpleGridProps, } from '@chakra-ui/react' import { extend } from 'colord' import namesPlugin from 'colord/plugins/names' @@ -16,85 +16,94 @@ import ThemeEditorPaletteDrawer from './ThemeEditorPaletteDrawer' extend([namesPlugin]) export type ThemeEditorPaletteProps = { - palette: Record - scale?: (string | number)[] - value?: string - token: string - showIndex?: boolean - disableEditDrawer?: boolean + palette: Record + scale?: (string | number)[] + value?: string + token: string + showIndex?: boolean + disableEditDrawer?: boolean + } & Omit const ThemeEditorPalette: FC = ({ - p, - px, - palette, - token, - scale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], - value, - showIndex, - disableEditDrawer, - ...rest + p, + px, + palette, + token, + scale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], + value, + showIndex, + disableEditDrawer, + ...rest }) => { - const { onOpen, onClose, isOpen } = useDisclosure() - const shadow = useColorModeValue('surface', 'surfaceDark') - const borderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100') + const { onOpen, onClose, isOpen } = useDisclosure() + const shadow = useColorModeValue('surface', 'surfaceDark') + const borderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100') + + return ( + <> + - - - {scale.map((paletteIndex, key) => ( -
- {showIndex && ( - = 0 ? 'gray.500' : palette[scale[9 - key]]} - size="xs" - d={{ base: 'none', md: 'inline' }} + - {paletteIndex} - - )} -
- ))} - - - {!disableEditDrawer && ( - - )} - - ) + {scale.map((paletteIndex, key) => ( +
+ {showIndex && ( + = 0 ? 'gray.500' : palette[scale[9 - key]]} + size="xs" + d={{ base: 'none', md: 'inline' }} + > + {paletteIndex} + + )} +
+ ))} + + + {!disableEditDrawer && ( + + )} + + ) } export default ThemeEditorPalette diff --git a/packages/chakra-ui-colors/src/ThemeEditorPaletteColorItem.tsx b/packages/chakra-ui-colors/src/ThemeEditorPaletteColorItem.tsx index 7c2bced..6adcff2 100644 --- a/packages/chakra-ui-colors/src/ThemeEditorPaletteColorItem.tsx +++ b/packages/chakra-ui-colors/src/ThemeEditorPaletteColorItem.tsx @@ -1,23 +1,24 @@ import React, { FC, useCallback, useState, useEffect, useMemo } from 'react' import { - Box, - Flex, - BoxProps, - useColorModeValue, - Input, - Text, - Popover, - PopoverTrigger, - PopoverContent, - PopoverBody, - Button, - Icon, + Box, + Flex, + BoxProps, + useColorModeValue, + Input, + Text, + Popover, + PopoverTrigger, + PopoverContent, + PopoverBody, + Button, + Icon, + useColorMode, } from '@chakra-ui/react' import { useDebouncyEffect } from 'use-debouncy' import { RgbaStringColorPicker } from 'react-colorful' import { colord, extend } from 'colord' import namesPlugin from 'colord/plugins/names' -import { FaTrashAlt } from 'react-icons/fa' +import { HiOutlineTrash } from 'react-icons/hi' import { COLOR_PICKER_TRANSPARENT_SAFE_BG_B64 } from './constants' import ThemeEditorPalette from './ThemeEditorPalette' import { ElementsHighlighter } from '@hypertheme-editor/chakra-ui-core' @@ -25,159 +26,172 @@ import { ElementsHighlighter } from '@hypertheme-editor/chakra-ui-core' extend([namesPlugin]) export type ThemeEditorPaletteColorItemProps = { - title: string - palette?: Record - scale?: (string | number)[] - value?: string - token: string - onChange: (value: { token: string; value: string }) => void - onDelete?: (token: string) => void - hasDelete?: boolean - showIndex?: boolean + title: string + palette?: Record + scale?: (string | number)[] + value?: string + token: string + onChange: (value: { token: string; value: string }) => void + onDelete?: (token: string) => void + hasDelete?: boolean + showIndex?: boolean } & Omit const ThemeEditorPaletteColorItem: FC = ({ - p, - px, - palette, - title = 'Primary', - token, - scale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], - value, - onChange, - hasDelete, - onDelete, - showIndex, - ...rest + p, + px, + palette, + title = 'Primary', + token, + scale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], + value, + onChange, + hasDelete, + onDelete, + showIndex, + ...rest }) => { - const [currentValue, setCurrentValue] = useState(value) + const [currentValue, setCurrentValue] = useState(value) - const rgbaString = useMemo(() => { - if (!currentValue) { - return '#ffffff' - } - return currentValue.startsWith('rgba') ? currentValue : colord(currentValue).toRgbString() - }, [currentValue]) + 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 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 = useCallback((event) => { - setCurrentValue(event.target.value) - }, []) + const handleValueChange: React.ChangeEventHandler = useCallback((event) => { + setCurrentValue(event.target.value) + }, []) - const handleDelete = useCallback(() => { - if (onDelete) { - onDelete(token) - } - }, [onDelete, token]) + const handleDelete = useCallback(() => { + if (onDelete) { + onDelete(token) + } + }, [onDelete, token]) - useDebouncyEffect( - () => { - if (colord(currentValue as any).isValid() && currentValue !== value) { - onChange({ token, value: currentValue! }) - } - }, - 500, - [currentValue] - ) + useDebouncyEffect( + () => { + if (colord(currentValue as any).isValid() && currentValue !== value) { + onChange({ token, value: currentValue! }) + } + }, + 500, + [currentValue] + ) - useEffect(() => { - setCurrentValue(value) - }, [value]) + useEffect(() => { + setCurrentValue(value) + }, [value]) - // useEffect(() => { - // if (onChange && isColor(debouncedValue)) { - // onChange({ token, value: debouncedValue }) - // } - // // eslint-disable-next-line react-hooks/exhaustive-deps - // }, [debouncedValue]) + // useEffect(() => { + // if (onChange && isColor(debouncedValue)) { + // onChange({ token, value: debouncedValue }) + // } + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, [debouncedValue]) + const { colorMode } = useColorMode() + return ( + + + {title} + + + + + + + + + + + + + + + + + 0 + ? scale.map((s) => `colors.${token}.${s}`) + : `colors.${token}${palette ? '.500' : ''}` + } + > + 0 ? 32 : '100%'} + width='10.125rem' + height='40px' + // size='sm' + variant='filled' + borderRadius="6px" + //shadow={shadow} + border='none' + cursor="pointer" + px="0.5rem" + pos="sticky" + ml={2} + value={currentValue} + onChange={handleValueChange} + fontSize="0.875rem" + bgColor={colorMode == 'light' ? '' : '#14141F'} + placeholder="Color code" + /> + + {palette && scale && scale.length > 0 && ( + + )} + {hasDelete && ( + - )} - - - ) + aria-label="remove color" + variant="ghost" + onClick={handleDelete} + px="0.5rem" + opacity='0.8' + _hover={{ + //color: 'red.500', + opacity: '1' + }} + _active={{ border: 'none', boxShadow: 'none' }} + + > + + + )} + + + ) } export default ThemeEditorPaletteColorItem diff --git a/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawer.tsx b/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawer.tsx index 1524fe7..10612f9 100644 --- a/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawer.tsx +++ b/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawer.tsx @@ -1,143 +1,162 @@ import React, { FC, useCallback, useRef } from 'react' import { - Button, - Drawer, - DrawerBody, - DrawerContent, - DrawerProps, - useColorModeValue, - DrawerFooter, - Box, - SimpleGrid, + Button, + Drawer, + DrawerBody, + DrawerContent, + DrawerProps, + useColorModeValue, + DrawerFooter, + Box, + SimpleGrid, + useColorMode, } from '@chakra-ui/react' import { BaseListItem, useThemeEditor } from '@hypertheme-editor/chakra-ui-core' import ThemeEditorColorItem from './ThemeEditorColorItem' import { ThemeEditorPaletteDrawerHeader } from './ThemeEditorPaletteDrawerHeader' export type ThemeEditorPaletteDrawerProps = { - palette: Record - scale?: (string | number)[] - token: string - showIndex?: boolean + palette: Record + scale?: (string | number)[] + token: string + showIndex?: boolean } & Omit + const ThemeEditorPaletteDrawer: FC = (props) => { - const { - onClose, - palette, - scale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], - token, - ...rest - } = props - const { theme, setTheme } = useThemeEditor() + const { + onClose, + palette, + scale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900], + token, + ...rest + } = props + const { theme, setTheme } = useThemeEditor() - const btnRef = useRef() - const closeBtnRef = useRef() + const btnRef = useRef() + const closeBtnRef = useRef() - const bgColor = useColorModeValue('white', 'gray.900') - const bgColor2 = useColorModeValue('white', 'gray.800') + const bgColor = useColorModeValue('white', 'gray.900') + const bgColor2 = useColorModeValue('white', 'gray.800') - const shadow = useColorModeValue('surface', 'surfaceDark') + const shadow = useColorModeValue('surface', 'surfaceDark') - const handleChangeColor = useCallback( - ({ token, index, value }) => { - if (theme && theme.colors && theme.colors[token] && theme.colors[token][index]) { - if ( - typeof theme.colors[token][index] === 'string' && - theme.colors[token][index] !== value - ) { - try { - const newTheme = { - ...theme, - colors: { - ...theme.colors, - [token]: { - ...theme.colors[token], - [index]: value, - }, - }, - } as any - // setThemeColor(token, index, value) - setTheme(newTheme) - } catch (error) { - // - } - } - // } else { - // try { - // const newColorPalette = generatePalette(value) - // const newTheme = { - // ...theme, - // colors: { - // ...theme.colors, - // [token]: newColorPalette, - // }, - // } as any - // setThemeColorPalette(token, newColorPalette) - // setTheme(newTheme) - // } catch (error) { - // // - // } - // } - } - }, - [setTheme, theme] - ) + const handleChangeColor = useCallback( + ({ token, index, value }) => { + if (theme && theme.colors && theme.colors[token] && theme.colors[token][index]) { + if ( + typeof theme.colors[token][index] === 'string' && + theme.colors[token][index] !== value + ) { + try { + const newTheme = { + ...theme, + colors: { + ...theme.colors, + [token]: { + ...theme.colors[token], + [index]: value, + }, + }, + } as any + // setThemeColor(token, index, value) + setTheme(newTheme) + } catch (error) { + // + } + } + // } else { + // try { + // const newColorPalette = generatePalette(value) + // const newTheme = { + // ...theme, + // colors: { + // ...theme.colors, + // [token]: newColorPalette, + // }, + // } as any + // setThemeColorPalette(token, newColorPalette) + // setTheme(newTheme) + // } catch (error) { + // // + // } + // } + } + }, + [setTheme, theme] + ) + const { colorMode } = useColorMode() + return ( + - - - - - {scale.map((paletteIndex, key) => ( - - { - handleChangeColor({ token, index: colorIndex, value }) - }} - /> - - ))} - - - - - - - - - - ) + + + + + {scale.map((paletteIndex, key) => ( + + + { + handleChangeColor({ token, index: colorIndex, value }) + }} + /> + + + ))} + + + + + + + + + + ) } export default ThemeEditorPaletteDrawer diff --git a/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawerHeader.tsx b/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawerHeader.tsx index 1657b79..5f54260 100644 --- a/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawerHeader.tsx +++ b/packages/chakra-ui-colors/src/ThemeEditorPaletteDrawerHeader.tsx @@ -1,37 +1,39 @@ import React, { FC, MutableRefObject } from 'react' import { - DrawerHeader, - Flex, - Box, - IconButton, - Divider, - ButtonGroup, - Button, - Text, + DrawerHeader, + Flex, + Box, + IconButton, + Divider, + ButtonGroup, + Button, + Text, + useColorMode, } from '@chakra-ui/react' -import { MdClose } from 'react-icons/md' -import { RiArrowGoBackFill, RiArrowGoForwardFill } from 'react-icons/ri' +//import { MdClose } from 'react-icons/md' +//import { RiArrowGoBackFill, RiArrowGoForwardFill } from 'react-icons/ri' import { ColorModeToggle, useThemeEditor } from '@hypertheme-editor/chakra-ui-core' -import ThemeEditorPalette from './ThemeEditorPalette' - +//import ThemeEditorPalette from './ThemeEditorPalette' +import { BiArrowBack } from 'react-icons/bi' +import { BsArrow90DegLeft, BsArrow90DegRight } from 'react-icons/bs' type Props = { - onClose: () => void - initialFocusRef: MutableRefObject - token: string + onClose: () => void + initialFocusRef: MutableRefObject + token: string } export const ThemeEditorPaletteDrawerHeader: FC = ({ onClose, initialFocusRef, token }) => { - const { canUndo, canRedo, undo, redo, theme } = useThemeEditor() - - return ( - - - {theme?.colors && ( + const { canUndo, canRedo, undo, redo, theme } = useThemeEditor() + const { colorMode } = useColorMode() + return ( + + + { /* {theme?.colors && ( = ({ onClose, initialFocu d={{ base: 'none', sm: 'grid' }} disableEditDrawer /> - )} - - - {token} palette - - - - - - + )}*/} - - } - aria-label="redo" - disabled={!canRedo} - onClick={redo} - /> - + + + {token} palette + + + - - - ) -} + + } + fontSize="16px" + height="27px" + width="27px" + aria-label="undo" + disabled={!canUndo} + onClick={undo} + variant="outline" + border="none" + color={colorMode == 'light' ? 'gray.600' : 'gray.100'} + bgColor={colorMode == 'light' ? 'white' : 'gray.700'} + _focus={{ border: 'none' }} + /> + + } + fontSize="16px" + height="27px" + width="27px" + aria-label="redo" + disabled={!canRedo} + onClick={redo} + variant="outline" + border="none" + color={colorMode == 'light' ? 'gray.600' : 'gray.100'} + bgColor={colorMode == 'light' ? 'white' : 'gray.700'} + _focus={{ border: 'none' }} + /> + + + + + + {/* + } + aria-label="undo" + disabled={!canUndo} + onClick={undo} + /> + + + } + aria-label="redo" + disabled={!canRedo} + onClick={redo} + /> + + + */} + + ) +} \ No newline at end of file diff --git a/packages/chakra-ui-colors/src/ThemeEditorPalettePopoverForm.tsx b/packages/chakra-ui-colors/src/ThemeEditorPalettePopoverForm.tsx index da86d12..996e8d2 100644 --- a/packages/chakra-ui-colors/src/ThemeEditorPalettePopoverForm.tsx +++ b/packages/chakra-ui-colors/src/ThemeEditorPalettePopoverForm.tsx @@ -1,163 +1,171 @@ import React, { FC, useState, useCallback, useMemo } from 'react' import { - Button, - ButtonGroup, - ButtonProps, - FormControl, - FormLabel, - Icon, - Input, - InputProps, - Popover, - PopoverBody, - PopoverCloseButton, - PopoverContent, - PopoverHeader, - PopoverTrigger, - Stack, - Switch, - useDisclosure, - Flex, - PopoverFooter, + Button, + ButtonGroup, + ButtonProps, + FormControl, + FormLabel, + Icon, + Input, + InputProps, + Popover, + PopoverBody, + PopoverCloseButton, + PopoverContent, + PopoverHeader, + PopoverTrigger, + Stack, + Switch, + useDisclosure, + Flex, + PopoverFooter, + useColorMode, + useColorModeValue, + Box, } from '@chakra-ui/react' import { - setThemeColorsOfPalette, - setThemeSingleColor, - useThemeEditor, + setThemeColorsOfPalette, + setThemeSingleColor, + useThemeEditor, } from '@hypertheme-editor/chakra-ui-core' import ThemeEditorPaletteColorItem from './ThemeEditorPaletteColorItem' import { generatePalette } from './generateColorPalette' -import { CgColorPicker } from 'react-icons/cg' + + + type Props = { - buttonProps?: ButtonProps + buttonProps?: ButtonProps + triggerComponent?: React.ReactElement } const initialFormValues = { - name: '', - isPaletteColor: true, + name: '', + isPaletteColor: true, } const TextInput: FC = React.forwardRef( - (props, ref) => { - return ( - - - {props.label} - - - - ) - } + (props, ref) => { + return ( + + + {props.label} + + + + ) + } ) export const ThemeEditorPalettePopoverForm: FC = (props) => { - const { buttonProps } = props - - const { onOpen, onClose, isOpen } = useDisclosure() - const [tempPalette, setTempPalette] = useState | undefined>(undefined) - const initialFocusRef = React.useRef(null) - const { theme, setTheme } = useThemeEditor() - const [formState, setFormState] = useState>(initialFormValues) - - const handleInputChange = useCallback>( - (event) => { - const { target } = event - const value = target.type === 'checkbox' ? target.checked : target.value - const { name } = target - - if (name === 'isPaletteColor' && formState.color) { - if (value) { - setTempPalette(generatePalette(formState.color)) - } else { - setTempPalette(undefined) - } - } - - setFormState({ - ...formState, - [name]: value, - }) - }, - [formState] - ) - - const handleColorChange = useCallback( - ({ token, value }) => { - setFormState({ - ...formState, - color: value, - }) - - if (formState.isPaletteColor) { - setTempPalette(generatePalette(value)) - } else { - setTempPalette(undefined) - } - }, - [formState] - ) - - const handleCreateCustomColor = useCallback(() => { - try { - const token = formState.name.toLowerCase() - const newPalette = generatePalette(formState.color) - const newTheme = { - ...theme, - colors: { - ...theme!.colors, - [token]: formState.isPaletteColor ? newPalette : formState.color, + const { buttonProps, triggerComponent } = props + + const { onOpen, onClose, isOpen } = useDisclosure() + const [tempPalette, setTempPalette] = useState | undefined>(undefined) + const initialFocusRef = React.useRef(null) + const { theme, setTheme } = useThemeEditor() + const [formState, setFormState] = useState>(initialFormValues) + + const handleInputChange = useCallback>( + (event) => { + const { target } = event + const value = target.type === 'checkbox' ? target.checked : target.value + const { name } = target + + if (name === 'isPaletteColor' && formState.color) { + if (value) { + setTempPalette(generatePalette(formState.color)) + } else { + setTempPalette(undefined) + } + } + + setFormState({ + ...formState, + [name]: value, + }) }, - } as any - - if (formState.isPaletteColor) { - setThemeColorsOfPalette(token, newPalette) - } else { - setThemeSingleColor(token, formState.color) - } - - setTheme(newTheme) - setFormState(initialFormValues) - setTempPalette(undefined) - onClose() - } catch (error) { - // - } - }, [formState.color, formState.isPaletteColor, formState.name, onClose, setTheme, theme]) - - const isFormValid = useMemo(() => formState.name && formState.color, [formState]) - - return ( - - - - - - {/* */} - - - Add Color - - - - {/* + + e.stopPropagation()}> + + {triggerComponent && <>{triggerComponent} } + + + + + e.stopPropagation()}> + {/* */} + + + Add Color + + + + {/* = (props) => { */} - - - - - - - Palette - - - - - - - - - - - - - - - ) + + + + + + + Palette + + + + + + + + + + + + + + + + ) } diff --git a/packages/chakra-ui-colors/src/index.ts b/packages/chakra-ui-colors/src/index.ts index 83783cf..e832e6b 100644 --- a/packages/chakra-ui-colors/src/index.ts +++ b/packages/chakra-ui-colors/src/index.ts @@ -13,4 +13,5 @@ export { ThemeEditorPaletteDrawer, ThemeEditorPalette, generatePalette, + } diff --git a/packages/chakra-ui-colors/stories/ThemeEditorColors.stories.tsx b/packages/chakra-ui-colors/stories/ThemeEditorColors.stories.tsx index b7569ab..c64a2bd 100644 --- a/packages/chakra-ui-colors/stories/ThemeEditorColors.stories.tsx +++ b/packages/chakra-ui-colors/stories/ThemeEditorColors.stories.tsx @@ -4,42 +4,42 @@ import { ComponentMeta } from '@storybook/react' import { Button } from '@chakra-ui/react' import { CgColorPicker } from 'react-icons/cg' import { - ThemeEditorButton, - ThemeEditorProvider, - ThemeEditorRootPanel, - ThemeEditorDrawer, - ThemeEditor, + ThemeEditorButton, + ThemeEditorProvider, + ThemeEditorRootPanel, + ThemeEditorDrawer, + ThemeEditor, } from '@hypertheme-editor/chakra-ui-core' import { ThemeEditorColors } from '../src' export default { - title: 'HyperThemeEditor/chakra-ui-colors/Colors Panel', - component: ThemeEditor, - argTypes: {}, + title: 'HyperThemeEditor/chakra-ui-colors/Colors Panel', + component: ThemeEditor, + argTypes: {}, } as ComponentMeta export const ThemeEditorColorsWithRootPanel = (args) => ( - - - - - - - - - - - + + + + + + + + + + + ) export const ThemeEditorColorsWithoutRootPanel = (args) => ( - - - - - - - - - + + + + + + + + + ) diff --git a/packages/chakra-ui-colors/tsconfig.json b/packages/chakra-ui-colors/tsconfig.json index 2c56cc4..2ddafba 100644 --- a/packages/chakra-ui-colors/tsconfig.json +++ b/packages/chakra-ui-colors/tsconfig.json @@ -27,7 +27,7 @@ }, "include": [ "src" - ], +, "../chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerHeader.tsx", "../chakra-ui-core/src/components/theme-editor/Popover" ], "exclude": [ "node_modules", "lib", diff --git a/packages/chakra-ui-core/src/components/base/BaseListItem.tsx b/packages/chakra-ui-core/src/components/base/BaseListItem.tsx index 1701926..83bdb35 100644 --- a/packages/chakra-ui-core/src/components/base/BaseListItem.tsx +++ b/packages/chakra-ui-core/src/components/base/BaseListItem.tsx @@ -1,100 +1,102 @@ import React, { FC } from 'react' import { - useColorModeValue, - Box, - Text, - Circle, - Stack, - Flex, - ThemingProps, - As, - BoxProps, + useColorModeValue, + Box, + Text, + Circle, + Stack, + Flex, + ThemingProps, + As, + BoxProps, } from '@chakra-ui/react' import { FaArrowRight } from 'react-icons/fa' export type BaseListItemProps = { - subtitle?: string - bgImage?: string - icon?: As - endIcon?: React.ReactElement - isClickable?: boolean + subtitle?: string + bgImage?: string + icon?: As + endIcon?: React.ReactElement + isClickable?: boolean + } & Pick & - BoxProps + BoxProps const BaseListItem: FC = ({ - title, - subtitle, - colorScheme = 'gray', - children, - icon: Icon, - endIcon = , - isClickable, - ...rest -}) => { - const focusBgColor = useColorModeValue(`${colorScheme}.100`, `${colorScheme}.800`) + title, + subtitle, + colorScheme = 'gray', + children, + icon: Icon, + endIcon = , + isClickable, - return ( - - - - {Icon && ( - - - - )} - {title && ( - - {title} - - )} - {children} - - {subtitle && ( - - {subtitle} - - )} - + ...rest +}) => { + const focusBgColor = useColorModeValue(`${colorScheme}.100`, `${colorScheme}.800`) - {endIcon && isClickable && ( - - {React.cloneElement(endIcon, {})} - - )} - - ) + + + {Icon && ( + + + + )} + {title && ( + + {title} + + )} + {children} + + {subtitle && ( + + {subtitle} + + )} + + + {endIcon && isClickable && ( + + {React.cloneElement(endIcon, {})} + + )} + + ) } export default BaseListItem diff --git a/packages/chakra-ui-core/src/components/base/ColorModeToggle.tsx b/packages/chakra-ui-core/src/components/base/ColorModeToggle.tsx index a875cde..913e7d5 100644 --- a/packages/chakra-ui-core/src/components/base/ColorModeToggle.tsx +++ b/packages/chakra-ui-core/src/components/base/ColorModeToggle.tsx @@ -1,45 +1,101 @@ -import { Stack, Text, useColorMode, StackProps, ThemingProps } from '@chakra-ui/react' +import { + Stack, + Text, + useColorMode, + StackProps, + ThemingProps, + Tabs, + TabList, + Tab, + Icon, + HStack, +} from '@chakra-ui/react' import React, { FC } from 'react' -import { FaSun } from 'react-icons/fa' -import { RiMoonClearFill } from 'react-icons/ri' +import { ImSun } from 'react-icons/im' +import { RiMoonClearLine } from 'react-icons/ri' import { IconSwitch } from './IconSwitch' type ColorModeToggleProps = { - size?: 'sm' | 'md' | 'lg' - showLabel?: boolean + size?: 'sm' | 'md' | 'lg' + showLabel?: boolean } & StackProps & - ThemingProps + ThemingProps const ColorModeToggle: FC = (props) => { - const { size = 'md', showLabel, colorScheme = 'gray', fontSize, ...rest } = props - const { colorMode, toggleColorMode } = useColorMode() + const { size = 'md', showLabel, colorScheme = 'gray', fontSize, ...rest } = props + const { colorMode, setColorMode } = useColorMode() + const colorModeValues = ['light', 'dark'] - return ( - - {showLabel && ( - - {colorMode} - - )} - + {showLabel && ( + + {colorMode} + + )} + {/* - - ) + /> */} + setColorMode(colorModeValues[index])} + variant="unstyled" + boxShadow="0px 4px 8px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.2)" + borderRadius="md" + bgColor={colorMode == 'light' ? 'white' : 'gray.700'} + p={0.5} + > + + {colorModeValues.map((value) => ( + + + + ))} + + + + ) } export default ColorModeToggle diff --git a/packages/chakra-ui-core/src/components/base/IconSwitch.tsx b/packages/chakra-ui-core/src/components/base/IconSwitch.tsx index 4ec54a1..260b259 100644 --- a/packages/chakra-ui-core/src/components/base/IconSwitch.tsx +++ b/packages/chakra-ui-core/src/components/base/IconSwitch.tsx @@ -80,6 +80,7 @@ export const IconSwitch = forwardRef((props, ref) => { justifyContent: 'center', d: 'flex', ...styles.thumb, + bgColor: props.value == 'light' ? 'gray.100' : 'gray.800', }), [styles.thumb] ) @@ -134,3 +135,32 @@ export const IconSwitch = forwardRef((props, ref) => { ) }) + +{ + /* + + + + {!state.isChecked ? ( + + ) : ( + + )} + + + {children && ( + + {children} + + )} + */ +} diff --git a/packages/chakra-ui-core/src/components/theme-editor-provider/ThemeEditorProvider.tsx b/packages/chakra-ui-core/src/components/theme-editor-provider/ThemeEditorProvider.tsx index 1dd3a73..f951868 100644 --- a/packages/chakra-ui-core/src/components/theme-editor-provider/ThemeEditorProvider.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor-provider/ThemeEditorProvider.tsx @@ -4,19 +4,21 @@ import { RecoilRoot } from 'recoil' import { ThemeStateInitializer } from './ThemeStateInitializer' import { GoogleFontFamiliesStateInitializer } from '../../utils/GoogleFontFamiliesStateInitializer' + type Props = { - children: React.ReactNode | React.ReactNode[] - disableGoogleFonts?: boolean + children: React.ReactNode | React.ReactNode[] + disableGoogleFonts?: boolean } export const ThemeEditorProvider: FC = ({ children, disableGoogleFonts = true }) => { - const chakraTheme = useTheme() + const chakraTheme = useTheme() + + return ( + + - return ( - - - {!disableGoogleFonts && } - {children} - - ) + {!disableGoogleFonts && } + {children} + + ) } diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx index 73e600b..646a3d6 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback, useState } from 'react' +import React, { FC, useCallback, useEffect, useState } from 'react' import { Button, ButtonProps, @@ -10,20 +10,74 @@ import { Box, } from '@chakra-ui/react' import { FaChevronDown, FaDownload } from 'react-icons/fa' +import { HiArrowDown } from 'react-icons/hi' + import { SiJavascript, SiTypescript } from 'react-icons/si' import BaseMenu from '../base/BaseMenu' import BaseMenuItem from '../base/BaseMenuItem' import { API_ENDPOINT } from '../../constants' -import { useThemeEditor } from '../../hooks/useThemeEditor' +import { Theme, useThemeEditor } from '../../hooks/useThemeEditor' +import { transform } from '@babel/core' +import { BsArrowRight } from 'react-icons/bs' const GENERATE_THEME_ENDPOINT = `${API_ENDPOINT}/generate-theme` -type Props = {} & ButtonProps +type Props = { + baseTheme: any + selectedProperties: string[] | number[] + selectAll: boolean + selectedLanguage: string +} & ButtonProps -export const ThemeDownloadButton: FC = ({ ...rest }) => { +export const ThemeDownloadButton: FC = ({ + baseTheme, + selectedProperties, + selectAll, + selectedLanguage, + ...rest +}) => { const [downloading, setDownloading] = useState(false) - const { theme } = useThemeEditor() + let { theme, setTheme } = useThemeEditor() const toast = useToast() + console.log('theme', theme) + console.log('baseTheme', baseTheme) + + // Prende le keys di un oggetto e le trasforma in un array di stringhe + /* console.log('theme', theme) + const arrayP = ['blur', 'colors'] + const getKeys = (obj) => { + return Object.keys(obj) + } + console.log('obj to array', getKeys(theme)) */ + + // Prende un array di stringhe e lo trasforma in un oggetto + const objectify = (array) => { + return array.reduce((obj, item) => { + if (theme !== undefined) { + console.log('obj', obj) + console.log('themeobj', theme[item]) + console.log('item', item) + obj[item] = theme[item] + return obj + } + }, {}) + } + + // TO UNCOMMENT ONCE THE API IS READY + /* useEffect(() => { + const newTheme = objectify(selectedProperties) + if (selectedProperties.length > 0) { + setTheme({ newTheme, ...baseTheme }) + } else { + setTheme({ ...baseTheme }) + } + }, [theme, setTheme, baseTheme]) */ + const { colors, ...others } = theme as Theme + const { blue, ...otherColors } = colors as any + + useEffect(() => { + setTheme({ colors: { blue: '', ...otherColors }, ...others }) + }, []) const handleDownload = useCallback( (language: string) => async () => { @@ -49,7 +103,6 @@ export const ThemeDownloadButton: FC = ({ ...rest }) => { }) return } - const resultBlob = await result.blob() const url = window.URL.createObjectURL(resultBlob) const a = document.createElement('a') @@ -59,6 +112,7 @@ export const ThemeDownloadButton: FC = ({ ...rest }) => { a.click() a.remove() } catch (error) { + console.log('wee error', error) // show an alert here // toast({ // title: 'Error during the download.', @@ -75,6 +129,25 @@ export const ThemeDownloadButton: FC = ({ ...rest }) => { ) return ( + + ) +} + +/* + return ( = ({ ...rest }) => { ) -} - -const ThemeDownloadMenuButton = ({ downloading = false, ...rest }) => { - return ( - - ) -} +*/ diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditor.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditor.tsx index 39bce41..0c842ef 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditor.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditor.tsx @@ -4,27 +4,34 @@ import { ThemeEditorDrawerProps } from './ThemeEditorDrawer' import { ThemeEditorButtonProps } from './ThemeEditorButton' import { theme } from '@hypertheme-editor/chakra-ui-theme' + + type ThemeEditorChild = React.ReactElement< - ThemeEditorButtonProps | ThemeEditorDrawerProps, - React.JSXElementConstructor + ThemeEditorButtonProps | ThemeEditorDrawerProps, + React.JSXElementConstructor > export type ThemeEditorProps = { - children: ThemeEditorChild[] | ThemeEditorChild + children: ThemeEditorChild[] | ThemeEditorChild } & UseDisclosureProps export const ThemeEditor: FC = ({ children, ...disclosureProps }) => { - const { isOpen, onOpen, onClose } = useDisclosure(disclosureProps) - - return ( - - {React.Children.map(React.Children.toArray(children), (child, index) => { - return React.cloneElement(child as any, { - isOpen, - onOpen, - onClose, - }) - })} - - ) + const { isOpen, onOpen, onClose } = useDisclosure(disclosureProps) + + return ( + + + + + {React.Children.map(React.Children.toArray(children), (child, index) => { + return React.cloneElement(child as any, { + isOpen, + onOpen, + onClose, + + }) + })} + + + ) } diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordion.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordion.tsx index d3b7313..25c636d 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordion.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordion.tsx @@ -2,28 +2,31 @@ import React, { FC } from 'react' import { AccordionProps, Accordion, useColorModeValue, Stack } from '@chakra-ui/react' export type ThemeEditorAccordionProps = { - children?: any + + children?: any } & AccordionProps export const ThemeEditorAccordion: FC = (props) => { - const { children, ...rest } = props - const shadow = useColorModeValue('surface', 'surfaceDark') - const bgColor = useColorModeValue('white', 'gray.800') + const { children, ...rest } = props + const shadow = useColorModeValue('surface', 'surfaceDark') + + const bgColor = useColorModeValue('white', 'gray.800') + + return ( + + {React.Children.map(children, (child, key) => { + return React.cloneElement(child, { + shadow, + bgColor, + borderRadius: rest.borderRadius || 'md', + borderWidth: 0, + key, + border: 'none', - return ( - - {React.Children.map(children, (child, key) => { - return React.cloneElement(child, { - shadow, - bgColor, - borderRadius: rest.borderRadius || 'md', - borderWidth: 0, - key, - border: 'none', - }) - })} - - ) + }) + })} + + ) } export default ThemeEditorAccordion diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordionItem.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordionItem.tsx index ea543b2..65f90e5 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordionItem.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorAccordionItem.tsx @@ -1,111 +1,157 @@ import React, { FC } from 'react' import { - Box, - Text, - AccordionItemProps, - AccordionButton, - AccordionItem, - AccordionIcon, - Circle, - useColorModeValue, - ThemingProps, - As, - Tag, - Flex, - Collapse, - Icon as ChakraIcon, + Box, + Text, + AccordionItemProps, + AccordionButton, + AccordionItem, + AccordionIcon, + Circle, + useColorModeValue, + useColorMode, + ThemingProps, + As, + Tag, + Flex, + Collapse, + Icon as ChakraIcon, + Accordion, } from '@chakra-ui/react' import { FaLock } from 'react-icons/fa' export type ThemeEditorAccordionItemProps = { - title?: string - subtitle?: string - icon?: As - endIcon?: As - tag?: string - unmountOnExit?: boolean + title?: string + subtitle?: string + icon?: As + endIcon?: As + tag?: string + unmountOnExit?: boolean + customHeight?: string + collapsedSubtitle?: string, + rightComponent?: React.ReactElement + } & AccordionItemProps & - Pick + Pick +// export const ThemeEditorAccordionItem: FC = (props) => { - const { - title = 'Accordion title', - subtitle, - colorScheme = 'gray', - icon: Icon, - tag, - children, - isDisabled, - unmountOnExit = true, - ...rest - } = props - const hoverBgColor = useColorModeValue('gray.200', 'gray.700') - const bgColor = useColorModeValue(`${colorScheme}.200`, `${colorScheme}.900`) + const { + title = 'Accordion title', + subtitle, + colorScheme = 'gray', + icon: Icon, + tag, + children, + isDisabled, + collapsedSubtitle, + customHeight, + rightComponent, + unmountOnExit = true, + ...rest + } = props + const hoverBgColor = useColorModeValue('gray.200', 'gray.700') + const bgColor = useColorModeValue(`${colorScheme}.200`, `${colorScheme}.900`) + const { colorMode } = useColorMode() + const ref = React.useRef() + + return ( + + {({ isExpanded }) => ( + <> + + {Icon && ( + + + + )} + + + {title} + {tag && ( + + {tag} + + )} + + {subtitle && ( + + {subtitle} + + )} + {collapsedSubtitle && !isExpanded && ( + + {collapsedSubtitle} + + + )} - return ( - - {({ isExpanded }) => ( - <> - - {Icon && ( - - - - )} - - - {title} - {tag && ( - - {tag} - - )} - - {subtitle && ( - - {subtitle} - - )} - + - {!isDisabled ? : } - - - *': { - w: 'full', - px: '0.5rem', - py: '0.5rem', - borderRadius: 'none', - }, - }} - > - {children} - - - - )} - - ) + {rightComponent && isExpanded && <>{rightComponent}} + {!isDisabled ? : } + + + *': { + w: 'full', + px: '0.5rem', + py: '0.5rem', + borderRadius: 'none', + }, + }} + > + {children} + + + + ) + } + + ) } export default ThemeEditorAccordionItem diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorButton.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorButton.tsx index 06b94a9..e7b6568 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorButton.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorButton.tsx @@ -3,31 +3,34 @@ import { Button, ButtonProps, ThemeProvider, Text, Divider } from '@chakra-ui/re import ThemeIcon from '../base/ThemeIcon' export type ThemeEditorButtonProps = { - label?: string - onOpen?: () => void - isOpen?: boolean + label?: string + + onOpen?: () => void + isOpen?: boolean } & Omit export const ThemeEditorButton: FC = ({ - label, - size, - onOpen, - isOpen, - ...rest + label, + + size, + onOpen, + isOpen, + ...rest }) => { - const themeIconSize = useMemo(() => (typeof size === 'undefined' ? undefined : size), [size]) + const themeIconSize = useMemo(() => (typeof size === 'undefined' ? undefined : size), [size]) + + return ( + - ) + + + )} + + + ) } diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawer.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawer.tsx index 16fcb76..cc39cf3 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawer.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawer.tsx @@ -1,12 +1,13 @@ import React, { FC, useRef, ReactElement } from 'react' import { - Alert, - AlertIcon, - Drawer, - DrawerBody, - DrawerContent, - DrawerProps, - useColorModeValue, + Alert, + AlertIcon, + Drawer, + DrawerBody, + DrawerContent, + DrawerProps, + useColorModeValue, + Text, } from '@chakra-ui/react' import { IconType } from 'react-icons' import ThemeEditorAccordion from './ThemeEditorAccordion' @@ -21,124 +22,131 @@ import { ThemeEditorRootPanel } from './ThemeEditorRootPanel' import { DRAWER_EXPANDED_INDEX_LOCAL_STORAGE_KEY } from '../../constants' import { useAccordionState } from '../../hooks/useAccordionState' + const mobileReadyItems = ['Colors'] export type ThemeEditorDrawerProps = Omit & { - children?: - | ReactElement<{ icon: IconType; title: string } & Record>[] + children?: + | ReactElement<{ icon: IconType; title: string, subtitle: string } & Record>[] | ReactElement<{ icon: IconType; title: string } & Record> - hideUpgradeToPro?: boolean - hideCredits?: boolean - headerComponent?: React.ReactElement< - ThemeEditorDrawerHeaderProps, - React.JSXElementConstructor - > - footerComponent?: React.ReactElement< - ThemeEditorDrawerFooterProps, - React.JSXElementConstructor - > - // additionalBody?: React.ReactNode - isOpen?: boolean - onClose?: () => void + hideUpgradeToPro?: boolean + hideCredits?: boolean + headerComponent?: React.ReactElement< + ThemeEditorDrawerHeaderProps, + React.JSXElementConstructor + > + footerComponent?: React.ReactElement< + ThemeEditorDrawerFooterProps, + React.JSXElementConstructor + > + // additionalBody?: React.ReactNode + isOpen?: boolean + onClose?: () => void } export const ThemeEditorDrawer: FC = ({ - hideUpgradeToPro, - hideCredits, - onClose, - isOpen, - children, - headerComponent = , - footerComponent = , - ...rest + hideUpgradeToPro, + hideCredits, + onClose, + isOpen, + + children, + headerComponent = , + footerComponent = , + ...rest }) => { - const bgColor = useColorModeValue('white', 'rgba(23,25,35,1)') - const btnRef = useRef() - const initialFocusRef = useRef() - const isMobile = useIsMobile() - const isCompatible = useIsBrowserCompatible() - const [defaultIndex, setDefaultIndex] = useAccordionState(DRAWER_EXPANDED_INDEX_LOCAL_STORAGE_KEY) + const bgColor = useColorModeValue('white', 'rgba(23,25,35,1)') + const btnRef = useRef() + const initialFocusRef = useRef() + const isMobile = useIsMobile() + const isCompatible = useIsBrowserCompatible() + const [defaultIndex, setDefaultIndex] = useAccordionState(DRAWER_EXPANDED_INDEX_LOCAL_STORAGE_KEY) - return ( - - - {React.isValidElement(headerComponent) && - React.cloneElement( - headerComponent as React.ReactElement, - { - onClose, - initialFocusRef, - } - )} - - {!isCompatible && ( - - - This browser is not compatible, most of the features will not work. - - )} - - {React.Children.map(React.Children.toArray(children), (child, index) => { - const { icon, title, children, ...panelProps } = (child as ReactElement).props - return ( - + {React.isValidElement(headerComponent) && + React.cloneElement( + headerComponent as React.ReactElement, + { + onClose, + initialFocusRef, + } + )} + - {(child as ReactElement).type === ThemeEditorRootPanel - ? children - : React.cloneElement( - child as ReactElement, + {!isCompatible && ( + + + This browser is not compatible, most of the features will not work. + + )} + + {React.Children.map(React.Children.toArray(children), (child, index) => { + const { icon, title, subtitle, children, ...panelProps } = (child as ReactElement).props + return ( + + {(child as ReactElement).type === ThemeEditorRootPanel + ? children + : React.cloneElement( + child as ReactElement, + { + ...panelProps, + }, + children + )} + + ) + })} + + {!hideUpgradeToPro && } + {!hideCredits && } + + {React.isValidElement(footerComponent) && + React.cloneElement( + footerComponent as React.ReactElement, { - ...panelProps, - }, - children - )} - - ) - })} - - {!hideUpgradeToPro && } - {!hideCredits && } - - {React.isValidElement(footerComponent) && - React.cloneElement( - footerComponent as React.ReactElement, - { - onClose, - isMobile, - } - )} - - - ) -} + // onClose, + isMobile, + } + )} + + + ) +} \ No newline at end of file diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx index 5f7e606..cdcbf4b 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx @@ -1,29 +1,57 @@ -import { DrawerFooter, Button, useColorModeValue } from '@chakra-ui/react' +import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react' import React, { FC } from 'react' +import { AiOutlineArrowDown } from 'react-icons/ai' import { ThemeDownloadButton } from '.' +import { ThemeExportDrawer } from './ThemeExportDrawer' export type ThemeEditorDrawerFooterProps = { - onClose?: () => void + // onClose?: () => void isMobile?: boolean - actionButton?: React.ReactNode + // actionButton?: React.ReactNode } export const ThemeEditorDrawerFooter: FC = ({ - onClose, isMobile, - actionButton = , + // actionButton = , }) => { - const bgColor = useColorModeValue('whiteAlpha.600', 'gray.900') + // const bgColor = useColorModeValue('whiteAlpha.600', 'gray.900') + const { isOpen, onOpen, onClose } = useDisclosure() return ( - + + + + ) +} + +/* + - {actionButton} - - ) -} + */ diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerHeader.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerHeader.tsx index 94bff7b..bf1b463 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerHeader.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerHeader.tsx @@ -1,82 +1,105 @@ import React, { FC, useCallback, MutableRefObject } from 'react' import { - DrawerHeader, - Flex, - Box, - IconButton, - Icon, - Divider, - ButtonGroup, - Button, - useColorModeValue, + DrawerHeader, + Flex, + Box, + IconButton, + Icon, + Divider, + ButtonGroup, + Button, + useColorModeValue, + HStack, + useColorMode, + Heading, } from '@chakra-ui/react' -import { FaRedo } from 'react-icons/fa' +import { BsArrowClockwise } from 'react-icons/bs' import { MdClose } from 'react-icons/md' -import { RiArrowGoBackFill, RiArrowGoForwardFill } from 'react-icons/ri' import { useRecoilState } from 'recoil' -import { ThemeIcon, ColorModeToggle } from '../base' -import { setThemeTokens } from '../../utils/updateThemeTokens' -import { themeEditorState, useThemeEditor } from '../../hooks/useThemeEditor' +import { ThemeIcon, ColorModeToggle } from '@hypertheme-editor/chakra-ui-core/src/components/base' +import { setThemeTokens } from '@hypertheme-editor/chakra-ui-core/src/utils/updateThemeTokens' +import { themeEditorState, useThemeEditor } from '@hypertheme-editor/chakra-ui-core/src/hooks/useThemeEditor' +import { BsArrow90DegLeft, BsArrow90DegRight } from 'react-icons/bs' + export type ThemeEditorDrawerHeaderProps = { - onClose?: () => void - initialFocusRef?: MutableRefObject + title?: string + onClose?: () => void + initialFocusRef?: MutableRefObject + children?: React.ReactNode } export const ThemeEditorDrawerHeader: FC = ({ - onClose, - initialFocusRef, + title = 'Hyper Theme', + onClose, + initialFocusRef, + children, }) => { - const { canUndo, canRedo, undo, redo } = useThemeEditor() - const [kitThemeState, setThemeState] = useRecoilState(themeEditorState) - const shadow = useColorModeValue('surface', 'surfaceDark') - const bgColor = useColorModeValue('whiteAlpha.600', 'gray.900') + const shadow = useColorModeValue('surface', 'surfaceDark') + const bgColor = useColorModeValue('white', 'gray.900') + const { colorMode } = useColorMode() - const handleResetTheme = useCallback(() => { - setThemeState({ - ...kitThemeState, - undoable: [], - undone: [], - currentTheme: kitThemeState.initialTheme, - }) - setThemeTokens(kitThemeState.initialTheme as any) - }, [kitThemeState, setThemeState]) + return ( + + {/* button as first element to let autofocus on open */} + + + + + + + {children ? children : } + + + + ) +} - return ( - - {/* button as first element to let autofocus on open */} - - - +const ThemeEditorDrawerDefaultHeader = ({ title }) => { + const { canUndo, canRedo, undo, redo } = useThemeEditor() + const { colorMode } = useColorMode() + const [kitThemeState, setThemeState] = useRecoilState(themeEditorState) + const handleResetTheme = useCallback(() => { + setThemeState({ + ...kitThemeState, + undoable: [], + undone: [], + currentTheme: kitThemeState.initialTheme, + }) + setThemeTokens(kitThemeState.initialTheme as any) + }, [kitThemeState, setThemeState]) - - - - + return ( + {/* = ({ fontSize="1rem" bg="transparent" > */} - Hyper Theme + + {title} + {/* */} - - - - {/* + + + } + fontSize="16px" + height="27px" + width="27px" + aria-label="undo" + disabled={!canUndo} + onClick={undo} + variant="outline" + border="none" + color={colorMode == 'light' ? 'gray.600' : 'gray.100'} + bgColor={colorMode == 'light' ? 'white' : 'gray.700'} + _focus={{ border: 'none' }} + /> + + } + fontSize="16px" + height="27px" + width="27px" + aria-label="redo" + disabled={!canRedo} + onClick={redo} + variant="outline" + border="none" + color={colorMode == 'light' ? 'gray.600' : 'gray.100'} + bgColor={colorMode == 'light' ? 'white' : 'gray.700'} + _focus={{ border: 'none' }} + /> + + } + onClick={handleResetTheme} + fontSize="15px" + size="sm" + height="27px" + w="10px" + variant="outline" + border="none" + color={colorMode == 'light' ? 'gray.600' : 'gray.100'} + bgColor={colorMode == 'light' ? 'white' : 'gray.700'} + _focus={{ border: 'none' }} + boxShadow="0px 4px 8px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.2)" + /> + {/* = ({ Reset theme */} - - + - - - } - aria-label="undo" - disabled={!canUndo} - onClick={undo} - /> - - - } - aria-label="redo" - disabled={!canRedo} - onClick={redo} - /> - - - - ) + ) } diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorRootPanel.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorRootPanel.tsx index c3c4aa6..9bc1a22 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorRootPanel.tsx +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorRootPanel.tsx @@ -3,10 +3,12 @@ import { IconType } from 'react-icons' import { ThemeEditorAccordionItemProps } from './ThemeEditorAccordionItem' export type ThemeEditorRootPanelProps = { - icon: IconType - title: string + icon: IconType + title: string + + } & ThemeEditorAccordionItemProps export const ThemeEditorRootPanel: FC = () => { - return null + return null } diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeExportDrawer.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeExportDrawer.tsx new file mode 100644 index 0000000..74a7b1a --- /dev/null +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeExportDrawer.tsx @@ -0,0 +1,168 @@ +import { + Drawer, + DrawerBody, + DrawerContent, + Flex, + Grid, + GridItem, + Heading, + useColorModeValue, + Text, + useCheckboxGroup, + Button, + useColorMode, +} from '@chakra-ui/react' +import React, { FC, useState } from 'react' +import { ThemeEditorDrawerHeaderProps } from '.' + +import { useThemeEditor } from '../../hooks/useThemeEditor' +import { ThemeEditorDrawerHeader } from './ThemeEditorDrawerHeader' +import { ThemeProperty } from './ThemeProperty' +import { ThemeExportDrawerFooter } from './ThemeExportDrawerFooter' +import { BiPaint } from 'react-icons/bi' +import { AiOutlineFontSize, AiOutlineRadiusUpright } from 'react-icons/ai' +import { BsFonts } from 'react-icons/bs' +import { CgEditShadows, CgFontSpacing, CgFormatLineHeight, CgSpaceBetween } from 'react-icons/cg' +import { FaBold } from 'react-icons/fa' + +export type ThemeExportDrawerProps = { + isOpen: boolean + onClose: () => void + headerComponent?: React.ReactElement< + ThemeEditorDrawerHeaderProps, + React.JSXElementConstructor + > +} + +export const ThemeExportDrawer: FC = ({ + isOpen, + onClose, + headerComponent = , +}) => { + const bgColor = useColorModeValue('white', 'gray.900') + const { theme } = useThemeEditor() + const { + colors, + fonts, + fontSizes, + fontWeights, + lineHeights, + letterSpacings, + shadows, + radii, + space, + ...baseTheme + } = theme as any + /* const themeLabels = [ + 'Colors', + 'Font', + 'Font Sizes', + 'Font Weight', + 'Line Height', + 'Letter Spacing', + 'Shadows', + 'Radii', + 'Space', + ] */ + const themeLabels = [ + { title: 'Colors', icon: BiPaint }, + { title: 'Font', icon: BsFonts }, + { title: 'Font Sizes', icon: AiOutlineFontSize }, + { title: 'Font Weight', icon: FaBold }, + { title: 'Line Height', icon: CgFormatLineHeight }, + { title: 'Letter Spacing', icon: CgFontSpacing }, + { title: 'Shadows', icon: CgEditShadows }, + { title: 'Radii', icon: AiOutlineRadiusUpright }, + { title: 'Space', icon: CgSpaceBetween }, + ] + const editableProperties = { + colors, + fonts, + fontSizes, + fontWeights, + lineHeights, + letterSpacings, + shadows, + radii, + space, + } + const getKeys = (obj) => { + return Object.keys(obj) + } + const { value, setValue, getCheckboxProps } = useCheckboxGroup({ + defaultValue: [], + }) + const [selectedLanguage, setSelectedLanguage] = useState('ts') + const [selectAll, setSelectAll] = useState(false) + console.log('theme', theme) + const { colorMode } = useColorMode() + /* console.log('editable', editableProperties) + console.log('selected values', value) */ + + return ( + + + {React.isValidElement(headerComponent) && + React.cloneElement( + headerComponent as React.ReactElement, + { + onClose, + children: ( + + + Export + + + Hyper Theme + + + ), + } + )} + + + Export + + + + {getKeys(editableProperties).map((key, index) => { + return ( + + + + ) + })} + + + + + + ) +} diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeExportDrawerFooter.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeExportDrawerFooter.tsx new file mode 100644 index 0000000..e0788be --- /dev/null +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeExportDrawerFooter.tsx @@ -0,0 +1,90 @@ +import { + Button, + DrawerFooter, + Flex, + HStack, + Icon, + Menu, + MenuButton, + MenuItem, + MenuList, + useColorMode, + Text, +} from '@chakra-ui/react' +import React, { FC, useState } from 'react' +import { MdKeyboardArrowDown } from 'react-icons/md' +import { SiTypescript, SiJavascript } from 'react-icons/si' +import { ThemeDownloadButton } from './ThemeDownloadButton' + +type ThemeExportDrawerFooterProps = { + baseTheme: any + value: any + selectAll: boolean +} + +export const ThemeExportDrawerFooter: FC = (props) => { + const [selectedLanguage, setSelectedLanguage] = useState('ts') + const { colorMode } = useColorMode() + return ( + + + + } + > + + + + + {selectedLanguage === 'ts' ? 'TypeScript' : 'JavaScript'} + + + + setSelectedLanguage((e.target as HTMLInputElement).value)} + > + TypeScript + + setSelectedLanguage((e.target as HTMLInputElement).value)} + > + JavaScript + + + + + + + ) +} diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeProperty.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeProperty.tsx new file mode 100644 index 0000000..eb3f748 --- /dev/null +++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeProperty.tsx @@ -0,0 +1,65 @@ +import { + useCheckbox, + useColorMode, + useColorModeValue, + chakra, + Flex, + Text, + Icon, +} from '@chakra-ui/react' +import React from 'react' + +export const ThemeProperty = (props) => { + const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } = useCheckbox(props) + const { colorMode } = useColorMode() + const bgColor = useColorModeValue('white', 'gray.800') + const checkboxBgColor = useColorModeValue('gray.100', 'gray.900') + const checked = state.isChecked || props.selected + + return ( + + + + + + + {props.label} + + + ) +} diff --git a/packages/chakra-ui-core/src/components/theme-editor/index.ts b/packages/chakra-ui-core/src/components/theme-editor/index.ts index 9362959..3031886 100644 --- a/packages/chakra-ui-core/src/components/theme-editor/index.ts +++ b/packages/chakra-ui-core/src/components/theme-editor/index.ts @@ -1,5 +1,6 @@ import { ThemeDownloadButton } from './ThemeDownloadButton' import { ThemeEditorDrawer } from './ThemeEditorDrawer' + import { ThemeEditorButton, ThemeEditorButtonProps as ThemeEditorButtonPropsToExport, diff --git a/packages/chakra-ui-core/src/hooks/useThemeEditor.ts b/packages/chakra-ui-core/src/hooks/useThemeEditor.ts index d8e5cf4..30be0fb 100644 --- a/packages/chakra-ui-core/src/hooks/useThemeEditor.ts +++ b/packages/chakra-ui-core/src/hooks/useThemeEditor.ts @@ -33,10 +33,14 @@ export const themeEditorState = atom({ default: { initialTheme: undefined, currentTheme: undefined, undoable: [], undone: [] }, effects_UNSTABLE: [ ({ onSet, setSelf }) => { + console.log('onSet', onSet, 'setSelf', setSelf) onSet((newValue) => { + console.log('newValue', newValue) if (newValue instanceof DefaultValue) { // + console.log('newValue in if', newValue) } else { + console.log('else') localStorage.setItem( THEME_STATE_LOCAL_STORAGE_KEY, JSON.stringify({ diff --git a/packages/chakra-ui-core/stories/ThemeEditor.stories.tsx b/packages/chakra-ui-core/stories/ThemeEditor.stories.tsx index c50adda..55f3ccc 100644 --- a/packages/chakra-ui-core/stories/ThemeEditor.stories.tsx +++ b/packages/chakra-ui-core/stories/ThemeEditor.stories.tsx @@ -2,10 +2,9 @@ import React, { useCallback, useState } from 'react' import { ComponentMeta } from '@storybook/react' import { Button } from '@chakra-ui/react' -import { CgColorPicker, CgEditShadows, CgSpaceBetween } from 'react-icons/cg' +import { CgColorPicker } from 'react-icons/cg' import { ImFontSize } from 'react-icons/im' -import { BiText } from 'react-icons/bi' -import { MdRoundedCorner } from 'react-icons/md' + import ColorModeToggle from '../src/components/base/ColorModeToggle' import { ThemeEditorButton, @@ -14,6 +13,7 @@ import { ThemeEditorDrawer, ThemeEditor, } from '../src' +import { ThemeEditorColors } from '../../hypertheme-chakra-ui/src' export default { title: 'HyperThemeEditor/chakra-ui-core/ThemeEditor', @@ -28,12 +28,12 @@ export const FreeVersionWithRootPanel = (args) => ( - {/* + - - */} + {/* */} + diff --git a/packages/chakra-ui-theme/src/ThemeProvider.tsx b/packages/chakra-ui-theme/src/ThemeProvider.tsx index 97d3f7f..692492d 100644 --- a/packages/chakra-ui-theme/src/ThemeProvider.tsx +++ b/packages/chakra-ui-theme/src/ThemeProvider.tsx @@ -1,29 +1,30 @@ import { - ChakraProvider, - ColorModeScript, - extendTheme, - Theme, + ChakraProvider, + ColorModeScript, + extendTheme, + Theme, } from '@chakra-ui/react' import React, { FC } from 'react' type ThemeProviderProps = { - theme: Theme + theme: Theme } const ThemeProvider: FC = (props) => { - const { theme, children } = props + const { theme, children } = props - const customTheme = extendTheme({ - ...theme, - config: { ...theme.config, cssVarPrefix: 'hyper-theme' }, - }) + const customTheme = extendTheme({ + ...theme, + config: { ...theme.config, cssVarPrefix: 'hyper-theme' }, + }) - return ( -
- - {children} -
- ) + return ( +
+ + + {children} +
+ ) } export default ThemeProvider diff --git a/packages/chakra-ui-theme/src/foundations/colors.ts b/packages/chakra-ui-theme/src/foundations/colors.ts index 4fcb7c1..ab7252b 100644 --- a/packages/chakra-ui-theme/src/foundations/colors.ts +++ b/packages/chakra-ui-theme/src/foundations/colors.ts @@ -2,16 +2,16 @@ import { Colors } from '@chakra-ui/react' const colors: Colors = { primary: { - 50: '#FBE5FF', - 100: '#F3D4FF', - 200: '#D6BEFB', - 300: '#BB9CF5', - 400: '#A280EB', - 500: '#7F58DE', - 600: '#6140BE', - 700: '#472C9F', - 800: '#301C80', - 900: '#20106A', + 50: '#ffffff', + 100: '#d1d2fa', + 200: '#babbf8', + 300: '#a3a4f6', + 400: '#8b8df4', + 500: '#5D5FEF', + 600: '#2f31ea', + 700: '#171ae8', + 800: '#1517d1', + 900: '#1012a3', }, secondary: { 50: '#EAFDED', diff --git a/packages/hypertheme-chakra-ui/src/HyperThemeEditor.tsx b/packages/hypertheme-chakra-ui/src/HyperThemeEditor.tsx index 6cdcfb7..0a12caa 100644 --- a/packages/hypertheme-chakra-ui/src/HyperThemeEditor.tsx +++ b/packages/hypertheme-chakra-ui/src/HyperThemeEditor.tsx @@ -1,9 +1,9 @@ import React, { FC } from 'react' import { - ThemeEditor, - ThemeEditorButton, - ThemeEditorButtonProps, - ThemeEditorDrawer, + ThemeEditor, + ThemeEditorButton, + ThemeEditorButtonProps, + ThemeEditorDrawer, } from '@hypertheme-editor/chakra-ui-core' import { ThemeEditorColors } from '@hypertheme-editor/chakra-ui-colors' import { ThemeEditorFontSizes } from '@hypertheme-editor/chakra-ui-font-sizes' @@ -13,13 +13,13 @@ import { ImFontSize } from 'react-icons/im' export type HyperThemeEditorProps = ThemeEditorButtonProps export const HyperThemeEditor: FC = (props) => { - return ( - - - - - - - - ) + return ( + + + + + + + + ) } diff --git a/packages/hypertheme-chakra-ui/stories/ThemeEditor.stories.tsx b/packages/hypertheme-chakra-ui/stories/ThemeEditor.stories.tsx index d6823fd..1ddde59 100644 --- a/packages/hypertheme-chakra-ui/stories/ThemeEditor.stories.tsx +++ b/packages/hypertheme-chakra-ui/stories/ThemeEditor.stories.tsx @@ -4,71 +4,72 @@ import { ComponentMeta } from '@storybook/react' import { Button } from '@chakra-ui/react' import { CgColorPicker, CgEditShadows, CgSpaceBetween } from 'react-icons/cg' import { ImFontSize } from 'react-icons/im' -import { BiText } from 'react-icons/bi' -import { MdRoundedCorner } from 'react-icons/md' -import // ThemeEditorButton, -// ThemeEditorProvider, -// ThemeEditorRootPanel, -// ThemeEditorDrawer, -// ThemeEditor, -'@hypertheme-editor/chakra-ui-core' + +import { + ThemeEditorButton, + ThemeEditorProvider, + ThemeEditorRootPanel, + ThemeEditorDrawer, + ThemeEditor, +} from + '@hypertheme-editor/chakra-ui-core' import { ThemeEditorColors } from '@hypertheme-editor/chakra-ui-colors' import { ThemeEditorFontSizes } from '@hypertheme-editor/chakra-ui-font-sizes' import { - HyperThemeEditor, - ThemeEditorButton, - ThemeEditorProvider, - ThemeEditorRootPanel, - ThemeEditorDrawer, - ThemeEditor, + HyperThemeEditor, + // ThemeEditorButton, + // ThemeEditorProvider, + // ThemeEditorRootPanel, + // ThemeEditorDrawer, + // ThemeEditor, } from '../src' export default { - title: 'HyperThemeEditor/hypertheme-chakra-ui/ThemeEditor Community', - component: ThemeEditor, - argTypes: {}, + title: 'HyperThemeEditor/hypertheme-chakra-ui/ThemeEditor Community', + component: ThemeEditor, + argTypes: {}, } as ComponentMeta export const DefaultEditor = (args) => ( - - - - + + + + ) export const DefaultEditorWithHiddenCredits = (args) => ( - - - - + + + + ) -export const WithRootPanel = (args) => ( - - - - - - - - - - - - - - +export const WithRootPanel = (args: any) => ( + + + + + + + + + + + + + + ) -export const WithoutRootPanel = (args) => ( - - - - - - - - - - +export const WithoutRootPanel = (args: any) => ( + + + + + + + + + + ) diff --git a/yarn.lock b/yarn.lock index d3b4ff4..6c62a19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2052,6 +2052,20 @@ dependencies: "@chakra-ui/utils" "1.8.2" +"@chakra-ui/icon@3.0.10": + version "3.0.10" + resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.10.tgz#1a11b5edb42a8af7aa5b6dec2bf2c6c4df1869fc" + integrity sha512-utO569d9bptEraJrEhuImfNzQ8v+a8PsQh8kTsodCzg8B16R3t5TTuoqeJqS6Nq16Vq6w87QbX3/4A73CNK5fw== + dependencies: + "@chakra-ui/shared-utils" "2.0.1" + +"@chakra-ui/icons@^2.0.10": + version "2.0.10" + resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.10.tgz#61aeb44c913c10e7ff77addc798494e50d66c760" + integrity sha512-hxMspvysOay2NsJyadM611F/Y4vVzJU/YkXTxsyBjm6v/DbENhpVmPnUf+kwwyl7dINNb9iOF+kuGxnuIEO1Tw== + dependencies: + "@chakra-ui/icon" "3.0.10" + "@chakra-ui/image@1.0.20": version "1.0.20" resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.20.tgz#18057ca248f17c813ad60812ac4c7965a1de1fda" @@ -2277,6 +2291,11 @@ "@chakra-ui/form-control" "1.4.1" "@chakra-ui/utils" "1.8.2" +"@chakra-ui/shared-utils@2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.1.tgz#41e314e42c96039e8ffb265e73145cf755813ab4" + integrity sha512-NXDBl/u4wrSNp0ON5R3r3evkRurrAz2yuO7neooaG+O5HEenVouGqm4CsXd6lUAPmjwiGzA0LQFNCt0Hj92dXg== + "@chakra-ui/skeleton@1.1.18": version "1.1.18" resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.1.18.tgz#872df12d51487dca18faa8a7a4eaeedd791b9423" @@ -6688,6 +6707,11 @@ boolify@^1.0.0: resolved "https://registry.yarnpkg.com/boolify/-/boolify-1.0.1.tgz#b5c09e17cacd113d11b7bb3ed384cc012994d86b" integrity sha1-tcCeF8rNET0Rt7s+04TMASmU2Gs= +bootstrap@^5.2.2: + version "5.2.2" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.2.tgz#834e053eed584a65e244d8aa112a6959f56e27a0" + integrity sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ== + boxen@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64" @@ -7150,6 +7174,11 @@ ccount@^1.0.0: resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043" integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg== +chakra-ui-steps@^1.7.4: + version "1.7.4" + resolved "https://registry.yarnpkg.com/chakra-ui-steps/-/chakra-ui-steps-1.7.4.tgz#9174c87b66f530f83ad7ab2568e5dd450b1e5576" + integrity sha512-EAHW04azBL0Vz0vR9uMJ92qTKeOc86gbHGXoeRd8wAKcTyQOf7vK5eyS4BUWq8Bflb2ZXVAdLhJtVumNerEuzg== + chalk@2.4.2, chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"