Radix Heading in framerX

RadixHeading.tsx

import * as React from "react"
import { PropertyControls, ControlType, Frame } from "framer"
import { ThemeWrap } from "./ThemeWrap"

import { Heading as HeadingPrimitive, Box } from "@modulz/radix"

interface Props {
    xray: Boolean
    text: string
    textColor:
        | "0"
        | "10"
        | "20"
        | "30"
        | "40"
        | "50"
        | "60"
        | "70"
        | "80"
        | "90"
        | "100"
        | "110"
        | "120"
        | "130"
        | "140"
    size: "0" | "1" | "2" | "3" | "4" | "5"
    fontWeight: "400" | "500"
    padding: number
    paddingBySide: Boolean
    pt: number
    pr: number
    pb: number
    pl: number
    margin: number
    marginBySide: Boolean
    mt: number
    mr: number
    mb: number
    ml: number
}

export function RadixHeading(props) {
    const { width: canvasWidth, height: CanvasHeight } = props
    const {
        xray,
        text,
        textColor,
        size,
        fontWeight,
        padding,
        paddingBySide,
        pt,
        pr,
        pb,
        pl,
        margin,
        marginBySide,
        mt,
        mr,
        mb,
        ml,
    } = props

    const paddingProp = paddingBySide
        ? {
              pt: pt,
              pr: pr,
              pb: pb,
              pl: pl,
          }
        : { p: padding }

    const marginProp = marginBySide
        ? {
              pt: mt,
              pr: mr,
              pb: mb,
              pl: ml,
          }
        : { p: margin }

    return (
        <ThemeWrap>
            <Box width={canvasWidth} height={CanvasHeight}>
                <Box bg={xray ? "margin" : null} {...marginProp}>
                    <Box bg={xray ? "padding" : null} {...paddingProp}>
                        <HeadingPrimitive
                            size={size}
                            textColor={textColor}
                            fontWeight={fontWeight}
                            truncate={false}
                        >
                            {text}
                        </HeadingPrimitive>
                    </Box>
                </Box>
            </Box>
        </ThemeWrap>
    )
}

RadixHeading.defaultProps = {
    text: "This is a Heading",
    size: "0",
    textColor: "40",
    fontWeight: "500",
    xray: false,
    width: 375,
    height: 200,
}

RadixHeading.propertyControls = {
    xray: { type: ControlType.Boolean, title: "X-Ray" },
    text: { type: ControlType.String, title: "Text" },
    size: {
        type: ControlType.Enum,
        options: ["0", "1", "2", "3", "4", "5"],
        optionTitles: ["h0", "h1", "h2", "h3", "h4", "h5"],
    },
    textColor: {
        type: ControlType.Enum,
        title: "Color",
        options: [
            "0",
            "10",
            "20",
            "30",
            "40",
            "50",
            "60",
            "70",
            "80",
            "90",
            "100",
            "110",
            "120",
            "130",
            "140",
        ],
    },
    fontWeight: {
        type: ControlType.Enum,
        options: ["400", "500"],
    },
    margin: {
        type: ControlType.FusedNumber,
        toggleKey: "marginBySide",
        toggleTitles: ["Margin", "Margin per Side"],
        valueKeys: ["mt", "mr", "mb", "ml"],
        valueLabels: ["MT", "MR", "MB", "ML"],
        min: 0,
        max: 20,
        title: "Margin",
    },
    padding: {
        type: ControlType.FusedNumber,
        toggleKey: "paddingBySide",
        toggleTitles: ["Padding", "Padding per Side"],
        valueKeys: ["pt", "pr", "pb", "pl"],
        valueLabels: ["PT", "PR", "PB", "PL"],
        min: 0,
        max: 20,
        title: "Padding",
    },
}

theme.tsx

// TODO: type Theme
type Theme = any

export const theme: Theme = {
    breakpoints: ["38em", "62em", "68em", "110em"],
    fonts: {
        normal:
            'UntitledSans, apple-system, BlinkMacSystemFont, "Helvetica Neue", helvetica, arial, sans-serif',
        medium:
            'UntitledSans-Medium, apple-system, BlinkMacSystemFont, "Helvetica Neue", helvetica, arial, sans-serif',
    },
    fontSizes: [
        "9px",
        "11px",
        "13px",
        "15px",
        "17px",
        "19px",
        "21px",
        "23px",
        "27px",
        "35px",
        "58px",
    ],
    space: [
        "0",
        "5px",
        "10px",
        "15px",
        "20px",
        "25px",
        "30px",
        "35px",
        "40px",
        "45px",
        "50px",
        "55px",
        "60px",
        "65px",
        "70px",
        "75px",
        "80px",
        "85px",
        "90px",
    ],
    sizes: [
        "0",
        "5px",
        "10px",
        "15px",
        "20px",
        "25px",
        "35px",
        "45px",
        "65px",
        "80px",
    ],
    lineHeights: [
        "20px",
        "25px",
        "30px",
        "35px",
        "40px",
        "45px",
        "50px",
        "55px",
        "60px",
    ],
    radii: [0, "3px", "5px", "10px"],
    colors: {
        margin: "rgba(255, 159, 0, 0.5)",
        padding: "rgba(3, 247, 198, 0.6)",
        "0": "#ff3838",
        "10": "#ff4838",
        "20": "#ff5f38",
        "30": "#ff7e38",
        "40": "#ffa638",
        "50": "#ffd938",
        "60": "#e5ff38",
        "70": "#95ff38",
        "80": "#38ff3b",
        "90": "#38ffad",
        "100": "#38d0ff",
        "110": "#3846ff",
        "120": "#b738ff",
        "130": "#ff38bd",
        "140": "#ff383b",
    },
}

// Breakpoint aliases
// By adding the following aliases, repsonsive props
// can be used like so:
// <Text fontSize={{ small: 3, medium: 4, large: 5 }} />
theme.breakpoints.small = 0
theme.breakpoints.medium = theme.breakpoints[0]
theme.breakpoints.large = theme.breakpoints[1]
theme.breakpoints.xlarge = theme.breakpoints[2]

ThemeWrap.tsx

import * as React from "react"
import { RadixProvider } from "@modulz/radix"
import { theme } from "./theme"

interface Props {
    children: React.ReactNode
}

export class ThemeWrap extends React.Component<Props> {
    static defaultProps = {
        children: <div>ThemeWrapper. Not a real component</div>,
    }

    render() {
        console.log(theme)
        return <RadixProvider theme={theme} children={this.props.children} />
    }
}