framer-box.tsx

import * as React from "react"
import { 
  addPropertyControls,
  ControlType,
  BooleanControlDescription,
  EnumControlDescription
} from "framer"

import * as Cog from '../../../dist/framer/'
import { BoxProps, BoxTheme } from '../../../dist/Box'
import { withHOC } from "./withHOC"

type Props = BoxProps & {
  width: number,
  height: number,
}

type Controls = {
  border: BooleanControlDescription,
  theme: EnumControlDescription
}

const controls: Controls = {
  border: { title: "Border", defaultValue: false, type: ControlType.Boolean },
  theme: {
    title: "Theme",
    options: BoxTheme[],
    defaultValue: "light",
    type: ControlType.Enum,
  },
}

const _Box: React.FC<Props> = ({
  theme = 'dark',
  border = false,
  padding,
  children,
  ...props
}) => {
  return (
    <Cog.Box 
      theme={theme}
      border={border}
      padding={padding}
      {...props}
    >
      {React.Children.map(children, content =>
        React.cloneElement(content, {
          ...content.props,
          style: {
            position: 'relative',
          },
        }),
      )}
    </Cog.Box>
  )
}

export const Box = withHOC(_Box)

Box.defaultProps = {
  width: 200,
  height: 50,
}

addPropertyControls(Box, controls)