|
| 1 | +/* eslint-disable unicorn/no-abusive-eslint-disable */ |
| 2 | +/* eslint-disable */ |
| 3 | +import { PropsWithChildren, useState } from "react"; |
| 4 | +import { ColorSprinkes, colorSprinkes } from "./colors.css"; |
| 5 | +// import { DessertBox } from "../theme/DessertBox"; |
| 6 | + |
| 7 | +import { Show } from "./Show"; |
| 8 | + |
| 9 | +const staticColor = "gray.100" as const; |
| 10 | +const staticColor2 = "gray.200" as any; |
| 11 | +const staticColor3 = "gray.300" as any; |
| 12 | + |
| 13 | +const dynamicColorName = "something"; |
| 14 | +const nestedReference = { ref: dynamicColorName } as const; |
| 15 | +const deepReference = nestedReference.ref; |
| 16 | + |
| 17 | +const dynamicElement = "staticColor"; |
| 18 | +const dynamicPart1 = "static"; |
| 19 | +const dynamicPart2 = "Color"; |
| 20 | +const dynamicPartsAsTemplateString = `${dynamicPart1}${dynamicPart2}` as const; |
| 21 | +const withDynamicPart = { |
| 22 | + dynamicPart1, |
| 23 | + dynamicPart2: dynamicPart2, |
| 24 | +}; |
| 25 | + |
| 26 | +const dynamicName = "dynamicColor"; |
| 27 | +const dynamicLiteralColor = "gray.900"; |
| 28 | + |
| 29 | +const colorMap = { |
| 30 | + staticColor, |
| 31 | + literalColor: "gray.600", |
| 32 | + [dynamicColorName]: "gray.700", |
| 33 | + [deepReference]: "gray.800", |
| 34 | + [dynamicName]: dynamicLiteralColor, |
| 35 | +}; |
| 36 | +const dynamicAttribute = "borderColor"; |
| 37 | +const objectWithAttributes = { color: "blackAlpha.400" } as any; |
| 38 | + |
| 39 | +const dynamicColor = colorMap[dynamicElement]; |
| 40 | + |
| 41 | +export const Demo = () => { |
| 42 | + const [isShown, setIsShown] = useState(false); |
| 43 | + const obj = isShown ? { text: "children" } : undefined; |
| 44 | + |
| 45 | + // const [controlledColor, setControlledColor] = useState("gray.400" as any); |
| 46 | + // const [dynamicVarColor, setDynamicVarColor] = useState("gray.500" as any); |
| 47 | + |
| 48 | + return ( |
| 49 | + <div style={{ display: "flex", flexDirection: "column", height: "100%" }}> |
| 50 | + <div style={{ display: "flex", flexDirection: "column", margin: "auto" }}> |
| 51 | + <div style={{ textAlign: "center", fontSize: "50px" }}>Ready to go</div> |
| 52 | + <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}> |
| 53 | + <h1>{isShown ? "Shown" : "Hidden"}</h1> |
| 54 | + <div> |
| 55 | + <input type="checkbox" onChange={() => setIsShown((current) => !current)} /> |
| 56 | + <Show when={isShown} fallback="fallback"> |
| 57 | + {() => obj!.text} |
| 58 | + </Show> |
| 59 | + </div> |
| 60 | + {/* <DessertBox>box</DessertBox> */} |
| 61 | + <div className={colorSprinkes({ color: "blue.100" })}>blue100 without ColorBox</div> |
| 62 | + <ColorBox color="red.200" /> |
| 63 | + <ColorBox color="yellow.300" backgroundColor="blackAlpha.100"> |
| 64 | + yellow.300 with children |
| 65 | + </ColorBox> |
| 66 | + <ColorBox color={isShown ? "cyan.400" : "cyan.500"}>ternary</ColorBox> |
| 67 | + <ColorBox {...{ color: "facebook.100" }}>spread</ColorBox> |
| 68 | + <ColorBox {...objectWithAttributes}>var spread</ColorBox> |
| 69 | + <ColorBox {...(isShown ? objectWithAttributes : null)}>conditional var spread</ColorBox> |
| 70 | + <ColorBox |
| 71 | + {...{ |
| 72 | + color: "facebook.100", |
| 73 | + backgroundColor: "blackAlpha.100", |
| 74 | + [dynamicAttribute]: "blackAlpha.300", |
| 75 | + }} |
| 76 | + > |
| 77 | + multiple spread |
| 78 | + </ColorBox> |
| 79 | + <ColorBox {...(isShown ? { color: "facebook.200" } : undefined)}>spread ternary</ColorBox> |
| 80 | + <ColorBox {...(isShown && { color: "facebook.300" })}>spread &&</ColorBox> |
| 81 | + <ColorBox color={"facebook.400"}>string in expression</ColorBox> |
| 82 | + <ColorBox color={staticColor}>staticColor</ColorBox> |
| 83 | + <ColorBox color={1 === 1 ? "facebook.500" : staticColor3}>staticColor ternary</ColorBox> |
| 84 | + <ColorBox color={isShown ? "facebook.600" : staticColor2}>staticColor ternary</ColorBox> |
| 85 | + {/* gray200/gray300 */} |
| 86 | + <ColorBox color={isShown ? staticColor2 : staticColor3}>staticColor ternary</ColorBox> |
| 87 | + {/* gray100 */} |
| 88 | + <ColorBox color={colorMap.staticColor}>colorMap dot staticColor</ColorBox> |
| 89 | + <ColorBox color={colorMap["staticColor"]}>colorMap bracket staticColor</ColorBox> |
| 90 | + <ColorBox color={colorMap["static" + "Color"] as any}> |
| 91 | + colorMap bracket binary expression with 2 string literal |
| 92 | + </ColorBox> |
| 93 | + <ColorBox color={colorMap["static" + `${"Color"}`] as any}> |
| 94 | + colorMap bracket binary expression with 1 string literal & 1 template string using string |
| 95 | + literal |
| 96 | + </ColorBox> |
| 97 | + <ColorBox color={colorMap["static" + `${dynamicPart2}`] as any}> |
| 98 | + colorMap bracket binary expression with 1 string literal & 1 template string using identifier |
| 99 | + </ColorBox> |
| 100 | + <ColorBox color={colorMap[("static" as any) + `${withDynamicPart["dynamicPart2"]}`] as any}> |
| 101 | + colorMap bracket binary expression with 1 string literal & as expression & 1 template string |
| 102 | + using identifier |
| 103 | + </ColorBox> |
| 104 | + <ColorBox color={colorMap[dynamicPart1 + "Color"]!}> |
| 105 | + colorMap bracket binary expression with 1 string literal & 1 identifier and exclamation mark |
| 106 | + </ColorBox> |
| 107 | + <ColorBox color={colorMap[dynamicPart1 + dynamicPart2]}> |
| 108 | + colorMap bracket binary expression with 2 identifier |
| 109 | + </ColorBox> |
| 110 | + {/* gray100 */} |
| 111 | + <ColorBox color={colorMap[dynamicElement]}>colorMap bracket var</ColorBox> |
| 112 | + {/* gray600/gray700 */} |
| 113 | + <ColorBox color={colorMap[isShown ? ("literalColor" as const) : deepReference] as any}> |
| 114 | + colorMap bracket conditonal access with ref and literal wrapped with as any |
| 115 | + </ColorBox> |
| 116 | + {/* gray700/gray100 */} |
| 117 | + <ColorBox color={(isShown ? colorMap?.[dynamicColorName] : dynamicColor) as any}> |
| 118 | + conditional colorMap bracket with optional dynamic access and fallback to ref |
| 119 | + </ColorBox> |
| 120 | + {/* gray100 */} |
| 121 | + <ColorBox color={colorMap?.staticColor}>colorMap dot optional staticColor</ColorBox> |
| 122 | + |
| 123 | + {/* unlikely this will ever be supported (unless ezno delivers) */} |
| 124 | + {/* <ColorBox color={controlledColor}>controlledColor</ColorBox> |
| 125 | + <div onClick={() => setDynamicVarColor("gray.600")}> |
| 126 | + <ColorBox color={dynamicVarColor}>dynamicVarColor</ColorBox> |
| 127 | + </div> */} |
| 128 | + </div> |
| 129 | + </div> |
| 130 | + </div> |
| 131 | + ); |
| 132 | +}; |
| 133 | + |
| 134 | +const ColorBox = ({ children, ...props }: PropsWithChildren<ColorSprinkes>) => { |
| 135 | + return <div className={colorSprinkes(props)} children={children} />; |
| 136 | +}; |
0 commit comments