HyperTheme

Editor v0.1.5

Try it

ThemeEditorDrawer

The ThemeEditorDrawer component renders the drawer containing the actual theme editor UI.

It can be customized to render custom header/footer and panels.

The children of this component are rendered as accordions, all children must have: icon and title props.

View source

This component is usueful when you're creating a custom theme editor and you want to use the HyperTheme UI.

Import

Known Issue!

Importing from @hypertheme-editor/chakra-ui-core leads to a known issue with recoil.
Be sure that you're importing only from @hypertheme-editor/chakra-ui or @hypertheme-editor-pro/chakra-ui.

Community Version

import { ThemeEditorDrawer } from '@hypertheme-editor/chakra-ui'

Pro Version PRO

import { ThemeEditorDrawer } from '@hypertheme-editor-pro/chakra-ui'

Usage

The ThemeEditorDrawer is the component where all the actual editor panels lives.

In these examples you'll see how the ThemeEditorDrawer can be customized.

This component doesn't work on itself, it must be a direct child of the ThemeEditor component.

With Colors Editor

In this example we have created a MyThemeEditor component that provides the Colors Editor panel:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

With Font Sizes Editor

In this example we're creating a MyThemeEditor component that provides the Font Sizes Editor panel:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorFontSizes icon={BiText} title="Font Sizes" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorFontSizes icon={BiText} title="Font Sizes" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

Recreating the HyperThemeEditor

In this example we're recreating the HyperThemeEditor provided by the @hypertheme-editor/chakra-ui package.

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
        <ThemeEditorFontSizes icon={ImFontSize} title="Font Sizes" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
        <ThemeEditorFontSizes icon={ImFontSize} title="Font Sizes" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

Recreating the PRO HyperThemeEditor PRO

In this example we're recreating the HyperThemeEditor provided by the @hypertheme-editor-pro/chakra-ui package.

We're also hiding the "Upgrade to PRO" alert from the ThemeEditorDrawer to reflect the pro package:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer hideUpgradeToPro>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
        <ThemeEditorTypography icon={BiText} title="Typography" />
        <ThemeEditorShadows icon={CgEditShadows} title="Shadows" />
        <ThemeEditorRadii icon={MdRoundedCorner} title="Radii" />
        <ThemeEditorSpacing icon={CgSpaceBetween} title="Space" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer hideUpgradeToPro>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
        <ThemeEditorTypography icon={BiText} title="Typography" />
        <ThemeEditorShadows icon={CgEditShadows} title="Shadows" />
        <ThemeEditorRadii icon={MdRoundedCorner} title="Radii" />
        <ThemeEditorSpacing icon={CgSpaceBetween} title="Space" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

Custom Panel

In this example we're creating a reusable MyPanel component that we can use inside the ThemeEditorDrawer:

function MyPanel(props) {
  return (
    <Flex
      flexDir="column"
      alignItems="center"
      justifyContent="center"
      minH="200px"
      bg="secondary.500"
      color="white"
      borderRadius="md"
    >
      <Icon as={MdAddShoppingCart} boxSize="40px" mb={4} />
      <Text size="sm">My Custom Panel</Text>
    </Flex>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <MyPanel icon={MdAddShoppingCart} title="My Custom Panel" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

render(<MyThemeEditor />)

function MyPanel(props) {
  return (
    <Flex
      flexDir="column"
      alignItems="center"
      justifyContent="center"
      minH="200px"
      bg="secondary.500"
      color="white"
      borderRadius="md"
    >
      <Icon as={MdAddShoppingCart} boxSize="40px" mb={4} />
      <Text size="sm">My Custom Panel</Text>
    </Flex>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <MyPanel icon={MdAddShoppingCart} title="My Custom Panel" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

render(<MyThemeEditor />)

Inline Custom Panel With ThemeEditorRootPanel

In this example we're using the ThemeEditorRootPanel component to render an inline Panel Editor:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorRootPanel icon={MdAddShoppingCart} title="My Custom Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="secondary.500"
            color="white"
            borderRadius="md"
          >
            <Icon as={MdAddShoppingCart} boxSize="40px" mb={4} />
            <Text size="sm">My Custom Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorRootPanel icon={MdAddShoppingCart} title="My Custom Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="secondary.500"
            color="white"
            borderRadius="md"
          >
            <Icon as={MdAddShoppingCart} boxSize="40px" mb={4} />
            <Text size="sm">My Custom Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

Custom Drawer

In this example we're wrapping the ThemeEditorDrawer in a reusable component.

This tecnhique is usueful when you have multiple different theme editors but you want to maintain the same drawer configuration, for example for overriding the footer:

function MyThemeEditorDrawer(props) {
  return (
    <ThemeEditorDrawer
      footerComponent={
        <Box bg="blue.500" color="white" p={4}>
          Custom Footer
        </Box>
      }
      {...props}
    />
  )
}

function MyColorsEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton label="Edit Colors" {...props} />
      <MyThemeEditorDrawer>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
      </MyThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyFontSizesEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton label="Edit Font Sizes" {...props} />
      <MyThemeEditorDrawer>
        <ThemeEditorFontSizes icon={BiText} title="Font Sizes" />
      </MyThemeEditorDrawer>
    </ThemeEditor>
  )
}

render(
  <HStack>
    <MyColorsEditor />
    <MyFontSizesEditor />
  </HStack>
)

function MyThemeEditorDrawer(props) {
  return (
    <ThemeEditorDrawer
      footerComponent={
        <Box bg="blue.500" color="white" p={4}>
          Custom Footer
        </Box>
      }
      {...props}
    />
  )
}

function MyColorsEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton label="Edit Colors" {...props} />
      <MyThemeEditorDrawer>
        <ThemeEditorColors icon={CgColorPicker} title="Colors" />
      </MyThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyFontSizesEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton label="Edit Font Sizes" {...props} />
      <MyThemeEditorDrawer>
        <ThemeEditorFontSizes icon={BiText} title="Font Sizes" />
      </MyThemeEditorDrawer>
    </ThemeEditor>
  )
}

render(
  <HStack>
    <MyColorsEditor />
    <MyFontSizesEditor />
  </HStack>
)

Props

Name	Type	Default	Short Description
`children`	`ThemeEditorRootPanel`	`undefined`	children must have `icon` and `title` props
`hideUpgradeToPro`	`boolean`	`false`	Hide the Unlock Pro Features Alert
`hideCredits`	`boolean`	`false`	Hide the credits
`headerComponent`	`ReactElement`	`ThemeEditorDrawerHeader`	Set the Drawer Header
`footerComponent`	`ReactElement`	`ThemeEditorDrawerFooter`	Set the Drawer Footer
`isOpen`	`boolean`	`false`	Set Drawer visibility
`onClose`	`() => void`	`undefined`	this callback is called by the Drawer close button

children

Passing children to ThemeEditorDrawer is the method to add editor panels.

Children are rendered as a group of accordions and they must provide these two mandatory props:

icon of type IconType from react-icons package.
title of type string

Here's an example of a custom dummy panel with a random icon (you can search for icons here):

function MyPanel(props) {
  return (
    <Flex
      flexDir="column"
      alignItems="center"
      justifyContent="center"
      minH="200px"
      bg="secondary.500"
      color="white"
      borderRadius="md"
    >
      <Icon as={MdAddShoppingCart} boxSize="40px" mb={4} />
      <Text size="sm">My Custom Panel</Text>
    </Flex>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <MyPanel icon={MdAddShoppingCart} title="My Custom Panel" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

render(<MyThemeEditor />)

function MyPanel(props) {
  return (
    <Flex
      flexDir="column"
      alignItems="center"
      justifyContent="center"
      minH="200px"
      bg="secondary.500"
      color="white"
      borderRadius="md"
    >
      <Icon as={MdAddShoppingCart} boxSize="40px" mb={4} />
      <Text size="sm">My Custom Panel</Text>
    </Flex>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <MyPanel icon={MdAddShoppingCart} title="My Custom Panel" />
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

render(<MyThemeEditor />)

hideUpgradeToPro

The hideUpgradeToPro prop hides the Unlock Pro Features Alert.

Unlock Pro Features Alert

By default it's hidden when using thePRO version.

This prop accepts a boolean value.

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer hideUpgradeToPro />
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer hideUpgradeToPro />
    </ThemeEditor>
  )
}

hideCredits

The hideCredits prop hides the credits that are visible below the last editor panel.

Drawer Credits

By default the credits are always visible.

This prop accepts a boolean value.

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer hideCredits />
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer hideCredits />
    </ThemeEditor>
  )
}

headerComponent

By default the ThemeEditorDrawer renders a ThemeEditorDrawerHeader (like in the image below).

ThemeEditorDrawerHeader

With the headerComponent prop you can override the header component and render what you want, check the example below:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer
        headerComponent={
          <Box py={6} px={3} bgColor="primary.500" color="white">
            I'm a custom Header
          </Box>
        }
      />
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer
        headerComponent={
          <Box py={6} px={3} bgColor="primary.500" color="white">
            I'm a custom Header
          </Box>
        }
      />
    </ThemeEditor>
  )
}

This prop accepts a ReactElement value.

footerComponent

By default the ThemeEditorDrawer renders a ThemeEditorDrawerFooter (like in the image below).

ThemeEditorDrawerFooter

With the footerComponent prop you can override the footer component and render what you want, check the example below:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer
        footerComponent={
          <Box py={6} px={3} bgColor="secondary.500" color="white">
            I'm a custom Footer
          </Box>
        }
      />
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer
        footerComponent={
          <Box py={6} px={3} bgColor="secondary.500" color="white">
            I'm a custom Footer
          </Box>
        }
      />
    </ThemeEditor>
  )
}

This prop accepts a ReactElement value.

isOpen

The isOpen prop hide or show the ThemeEditorDrawer.

This prop is overrided by the ThemeEditor component, so you don't have to mind it.

onClose

The onClose prop is called when clicking on the "close drawer" button in the header.