jsx elements
This commit is contained in:
parent
194eea5a21
commit
838ce7acb3
90
pss.py
90
pss.py
@ -1,90 +0,0 @@
|
|||||||
from typing import TypedDict, Union, Literal, Tuple, Optional, cast
|
|
||||||
|
|
||||||
# --- Units and Sizes ---
|
|
||||||
MediaQueryCheck = Literal["max-width", "min-width", "max-height", "min-height"]
|
|
||||||
Unit = Literal["px", "em", "rem", "%", "vh", "vw"]
|
|
||||||
Size = Tuple[float, Unit] # e.g., (16.0, "px")
|
|
||||||
MediaQuery = Tuple[MediaQueryCheck, float, Unit]
|
|
||||||
|
|
||||||
# --- Colors ---
|
|
||||||
RGB = Tuple[float, float, float] # 0-255 or 0.0-1.0
|
|
||||||
RGBA = Tuple[float, float, float, float] # includes alpha
|
|
||||||
Color = Union[RGB, RGBA]
|
|
||||||
|
|
||||||
# --- Positions ---
|
|
||||||
PositionKeyword = Literal["static", "relative", "absolute", "fixed", "sticky"]
|
|
||||||
|
|
||||||
# --- Display ---
|
|
||||||
Display = Literal["none", "block", "inline", "inline-block", "flex", "grid"]
|
|
||||||
|
|
||||||
# --- Alignment ---
|
|
||||||
TextAlign = Literal["left", "right", "center", "justify", "start", "end"]
|
|
||||||
|
|
||||||
# --- Overflow ---
|
|
||||||
Overflow = Literal["visible", "hidden", "scroll", "auto", "clip"]
|
|
||||||
|
|
||||||
# --- Border Style ---
|
|
||||||
BorderStyle = Literal["none", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"]
|
|
||||||
|
|
||||||
# --- Length / Size or keyword ---
|
|
||||||
AutoSize = Union[Size, Literal["auto"]]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class CSS(TypedDict, total=False):
|
|
||||||
color: Color
|
|
||||||
backgroundColor: Color
|
|
||||||
fontSize: Size
|
|
||||||
margin: Union[AutoSize, Tuple[AutoSize, AutoSize], Tuple[AutoSize, AutoSize, AutoSize, AutoSize]]
|
|
||||||
padding: Union[AutoSize, Tuple[AutoSize, AutoSize], Tuple[AutoSize, AutoSize, AutoSize, AutoSize]]
|
|
||||||
width: AutoSize
|
|
||||||
height: AutoSize
|
|
||||||
display: Display
|
|
||||||
position: PositionKeyword
|
|
||||||
top: AutoSize
|
|
||||||
left: AutoSize
|
|
||||||
right: AutoSize
|
|
||||||
bottom: AutoSize
|
|
||||||
textAlign: TextAlign
|
|
||||||
overflow: Overflow
|
|
||||||
borderColor: Color
|
|
||||||
borderWidth: Size
|
|
||||||
borderStyle: BorderStyle
|
|
||||||
opacity: float # 0.0 to 1.0
|
|
||||||
zIndex: int
|
|
||||||
lineHeight: Union[float, Size]
|
|
||||||
|
|
||||||
|
|
||||||
# --- Media Queries ---
|
|
||||||
ChildMQ = Tuple[Size, MediaQueryCheck]
|
|
||||||
|
|
||||||
ScopedCSS = Tuple[MediaQuery, CSS]
|
|
||||||
|
|
||||||
|
|
||||||
def Styles(
|
|
||||||
color: Optional[Color] = None,
|
|
||||||
backgroundColor: Optional[Color] = None,
|
|
||||||
fontSize: Optional[Size] = None,
|
|
||||||
display: Optional[Display] = None,
|
|
||||||
) -> CSS:
|
|
||||||
return cast(CSS, {k: v for k, v in locals().items() if v is not None})
|
|
||||||
|
|
||||||
def ScopedStyles(
|
|
||||||
mediaQuery: MediaQuery,
|
|
||||||
styles: CSS
|
|
||||||
) -> ScopedCSS:
|
|
||||||
return (mediaQuery, styles)
|
|
||||||
|
|
||||||
test = ScopedStyles(
|
|
||||||
("max-width", 1024, "px"),
|
|
||||||
{
|
|
||||||
"fontSize":(16, "px"),
|
|
||||||
"color":(255, 0, 0),
|
|
||||||
"backgroundColor":(0, 255, 0),
|
|
||||||
"display":"flex",
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
print(test)
|
|
||||||
59
py_jsx.py
Normal file
59
py_jsx.py
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
from typing import List, Protocol, Tuple
|
||||||
|
|
||||||
|
class StrArgsToStr(Protocol):
|
||||||
|
def __call__(self, *children: str) -> str:
|
||||||
|
...
|
||||||
|
|
||||||
|
ClassArg = str|List[str]|Tuple[str, ...]|None
|
||||||
|
|
||||||
|
def MakeAttrs(classes:ClassArg, id:str|None, attributes: dict[str, str | None]) -> str:
|
||||||
|
|
||||||
|
if classes:
|
||||||
|
attributes['class'] = " ".join(classes) if isinstance(classes, (list, tuple)) else classes
|
||||||
|
|
||||||
|
if id:
|
||||||
|
attributes['id'] = id
|
||||||
|
|
||||||
|
attrList: List[str] = [""]
|
||||||
|
for key, value in attributes.items():
|
||||||
|
if value:
|
||||||
|
attrList.append(f'{key}="{value}"')
|
||||||
|
return " ".join(attrList)
|
||||||
|
|
||||||
|
def ElWrapped(name: str, classes:ClassArg = None, id:str|None = None, attrs: dict[str, str | None] = {}, children:ClassArg = ()) -> StrArgsToStr:
|
||||||
|
def Wrapped(*children:str):
|
||||||
|
return f'<{name}{MakeAttrs(classes, id, attrs)}>{" ".join(children)}</{name}>'
|
||||||
|
return Wrapped
|
||||||
|
|
||||||
|
def ElInline(name: str, classes:ClassArg = None, id:str|None = None, attrs: dict[str, str | None] = {}) -> str:
|
||||||
|
return f'<{name} {MakeAttrs(classes, id, attrs)}/>'
|
||||||
|
|
||||||
|
def SimpleWrapped(name:str):
|
||||||
|
def proxy(classes:ClassArg = None, id:str|None = None):
|
||||||
|
return ElWrapped(name, classes, id)
|
||||||
|
return proxy
|
||||||
|
|
||||||
|
def SimpleInline(name:str):
|
||||||
|
def proxy(classes:ClassArg = None, id:str|None = None):
|
||||||
|
return ElInline(name, classes, id)
|
||||||
|
return proxy
|
||||||
|
|
||||||
|
def A(classes:ClassArg = None, id:str|None = None, href:str|None = None, target:str|None = None) -> StrArgsToStr:
|
||||||
|
return ElWrapped("a", classes, id, {"href":href, "target":id})
|
||||||
|
|
||||||
|
def IMG(classes:ClassArg = None, id:str|None = None, src:str|None = None):
|
||||||
|
return ElInline("img", classes, id, {"src":src})
|
||||||
|
|
||||||
|
DIV = SimpleWrapped("div")
|
||||||
|
P = SimpleWrapped("P")
|
||||||
|
BR = SimpleInline("br")
|
||||||
|
HR = SimpleInline("hr")
|
||||||
|
SPAN = SimpleWrapped("span")
|
||||||
|
|
||||||
|
print(
|
||||||
|
|
||||||
|
DIV(classes="outer")
|
||||||
|
(
|
||||||
|
A(classes="CTA Orange", href="www.link")("click")
|
||||||
|
)
|
||||||
|
)
|
||||||
138
pyle_sheets.py
Normal file
138
pyle_sheets.py
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
from typing import TypedDict, Union, Literal, Tuple, Optional, cast
|
||||||
|
import re
|
||||||
|
|
||||||
|
# --- Units and Sizes ---
|
||||||
|
MediaQueryCheck = Literal["max-width", "min-width", "max-height", "min-height"]
|
||||||
|
Unit = Literal["px", "em", "rem", "%", "vh", "vw"]
|
||||||
|
Size = Tuple[float, Unit]
|
||||||
|
MediaQuery = Tuple[MediaQueryCheck, float, Unit]
|
||||||
|
|
||||||
|
# --- Colors ---
|
||||||
|
RGB = Tuple[float, float, float]
|
||||||
|
RGBA = Tuple[float, float, float, float]
|
||||||
|
Color = Union[RGB, RGBA]
|
||||||
|
|
||||||
|
CSSValue = Union[Size, Color, str]
|
||||||
|
|
||||||
|
# --- Positions ---
|
||||||
|
PositionKeyword = Literal["static", "relative", "absolute", "fixed", "sticky"]
|
||||||
|
|
||||||
|
# --- Display ---
|
||||||
|
Display = Literal["none", "block", "inline", "inline-block", "flex", "grid"]
|
||||||
|
|
||||||
|
# --- Alignment ---
|
||||||
|
TextAlign = Literal["left", "right", "center", "justify", "start", "end"]
|
||||||
|
|
||||||
|
# --- Overflow ---
|
||||||
|
Overflow = Literal["visible", "hidden", "scroll", "auto", "clip"]
|
||||||
|
|
||||||
|
# --- Border Style ---
|
||||||
|
BorderStyle = Literal["none", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"]
|
||||||
|
|
||||||
|
# --- Length / Size or keyword ---
|
||||||
|
AutoSize = Union[Size, Literal["auto"]]
|
||||||
|
|
||||||
|
class CSS(TypedDict, total=False):
|
||||||
|
color: Color
|
||||||
|
backgroundColor: Color
|
||||||
|
fontSize: Size
|
||||||
|
margin: Union[AutoSize, Tuple[AutoSize, AutoSize], Tuple[AutoSize, AutoSize, AutoSize, AutoSize]]
|
||||||
|
padding: Union[AutoSize, Tuple[AutoSize, AutoSize], Tuple[AutoSize, AutoSize, AutoSize, AutoSize]]
|
||||||
|
width: AutoSize
|
||||||
|
height: AutoSize
|
||||||
|
display: Display
|
||||||
|
position: PositionKeyword
|
||||||
|
top: AutoSize
|
||||||
|
left: AutoSize
|
||||||
|
right: AutoSize
|
||||||
|
bottom: AutoSize
|
||||||
|
textAlign: TextAlign
|
||||||
|
overflow: Overflow
|
||||||
|
borderColor: Color
|
||||||
|
borderWidth: Size
|
||||||
|
borderStyle: BorderStyle
|
||||||
|
opacity: float # 0.0 to 1.0
|
||||||
|
zIndex: int
|
||||||
|
lineHeight: Union[float, Size]
|
||||||
|
|
||||||
|
def Styles(
|
||||||
|
color: Optional[Color] = None,
|
||||||
|
backgroundColor: Optional[Color] = None,
|
||||||
|
fontSize: Optional[Size] = None,
|
||||||
|
margin: Optional[Union[AutoSize, Tuple[AutoSize, AutoSize], Tuple[AutoSize, AutoSize, AutoSize, AutoSize]]] = None,
|
||||||
|
padding: Optional[Union[AutoSize, Tuple[AutoSize, AutoSize], Tuple[AutoSize, AutoSize, AutoSize, AutoSize]]] = None,
|
||||||
|
width: Optional[AutoSize] = None,
|
||||||
|
height: Optional[AutoSize] = None,
|
||||||
|
display: Optional[Display] = None,
|
||||||
|
position: Optional[PositionKeyword] = None,
|
||||||
|
top: Optional[AutoSize] = None,
|
||||||
|
left: Optional[AutoSize] = None,
|
||||||
|
right: Optional[AutoSize] = None,
|
||||||
|
bottom: Optional[AutoSize] = None,
|
||||||
|
textAlign: Optional[TextAlign] = None,
|
||||||
|
overflow: Optional[Overflow] = None,
|
||||||
|
borderColor: Optional[Color] = None,
|
||||||
|
borderWidth: Optional[Size] = None,
|
||||||
|
borderStyle: Optional[BorderStyle] = None,
|
||||||
|
opacity: Optional[float] = None,
|
||||||
|
zIndex: Optional[int] = None,
|
||||||
|
lineHeight: Optional[Union[float, Size]] = None,
|
||||||
|
) -> CSS:
|
||||||
|
"""
|
||||||
|
Function alternative to create a block of CSS styles.
|
||||||
|
"""
|
||||||
|
return cast(CSS, {k: v for k, v in locals().items() if v is not None})
|
||||||
|
|
||||||
|
def Sheet(mq:MediaQuery, *css:CSS):
|
||||||
|
"""
|
||||||
|
Serialize a CSS sheet with a media query and multiple CSS dictionaries.
|
||||||
|
"""
|
||||||
|
lines:list[str] = []
|
||||||
|
lines.append(f"@media ({mq[0]}: {mq[1]}{mq[2]}) {{")
|
||||||
|
|
||||||
|
def camel_to_kebab(name):
|
||||||
|
# Insert hyphen before capital letters and convert to lowercase
|
||||||
|
s1 = re.sub(r'(.)([A-Z][a-z]+)', r'\1-\2', name)
|
||||||
|
kebab = re.sub(r'([a-z0-9])([A-Z])', r'\1-\2', s1).lower()
|
||||||
|
return kebab
|
||||||
|
|
||||||
|
def concat(joiner:str, tuple:Union[RGB, RGBA, Size])->str:
|
||||||
|
return joiner.join(str(item) for item in tuple)
|
||||||
|
|
||||||
|
|
||||||
|
merged:CSS = {}
|
||||||
|
for d in css:
|
||||||
|
merged = {**merged, **d}
|
||||||
|
|
||||||
|
|
||||||
|
for key, value in merged.items():
|
||||||
|
text = value
|
||||||
|
if isinstance(value, tuple):
|
||||||
|
size = len(value)
|
||||||
|
if size < 3:
|
||||||
|
text = concat("", value)
|
||||||
|
elif size == 3:
|
||||||
|
text = "rgb(" + concat(", ", value) + ")"
|
||||||
|
elif size == 4:
|
||||||
|
text = "rgba(" + concat(", ", value) + ")"
|
||||||
|
|
||||||
|
lines.append(f" {camel_to_kebab(key)}: {text};")
|
||||||
|
|
||||||
|
lines.append("}")
|
||||||
|
return "\n".join(lines)
|
||||||
|
|
||||||
|
test = Sheet(
|
||||||
|
("max-width", 1024, "px"),
|
||||||
|
{
|
||||||
|
"fontSize":(16, "px"),
|
||||||
|
"color":(255, 0, 0),
|
||||||
|
"backgroundColor":(0, 255, 0),
|
||||||
|
"display":"block",
|
||||||
|
},
|
||||||
|
Styles(
|
||||||
|
color=(0, 0, 255),
|
||||||
|
backgroundColor=(255, 255, 0),
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
print(test)
|
||||||
Loading…
Reference in New Issue
Block a user