textiler-core 0.1.0

Provides the core utilities to get textiler to work
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

//! The typography system allows for complex writing instrumentation

use std::collections::HashMap;
use std::fmt::Display;

use yew::html::IntoPropValue;
use yew::{
    classes, function_component, html, html_nested, Children, ContextProvider, Html, Properties,
};

use crate::style::{Color, Size, Variant};
use crate::system::{ColorProp, StylingBox, VariantProp};
use crate::theme::typography::TypographyLevel;
use crate::Sx;

pub type TypographyLevelMapping = HashMap<TypographyLevel, String>;

fn default_level_mapping() -> TypographyLevelMapping {
    use Size::*;
    use TypographyLevel::*;
    [
        (H1, "h1"),
        (H2, "h2"),
        (H3, "h3"),
        (H4, "h4"),
        (Title { size: Xs }, "p"),
        (Title { size: Sm }, "p"),
        (Title { size: Md }, "p"),
        (Title { size: Lg }, "p"),
        (Title { size: Xl }, "p"),
        (Body { size: Xs }, "span"),
        (Body { size: Sm }, "p"),
        (Body { size: Md }, "p"),
        (Body { size: Lg }, "p"),
        (Body { size: Xl }, "p"),
    ]
    .into_iter()
    .map(|(k, v)| (k, v.to_string()))
    .collect()
}

#[derive(Debug, Clone, Properties, PartialEq)]
pub struct TypographyProps {
    #[prop_or_else(|| "".to_string())]
    pub component: String,
    #[prop_or_default]
    pub sx: Sx,
    #[prop_or_default]
    pub level: TypographyLevel,
    #[prop_or_default]
    pub variant: VariantProp,
    #[prop_or_default]
    pub color: ColorProp,
    #[prop_or_else(default_level_mapping)]
    pub mapping: TypographyLevelMapping,
    #[prop_or_default]
    pub children: Children,
}

#[function_component]
pub fn Typography(props: &TypographyProps) -> Html {
    let context = yew::use_context::<TypographyContext>();
    let TypographyProps {
        component,
        sx,
        children,
        level,
        mapping,
        variant,
        color,
        ..
    } = props;

    let component = yew::use_memo(
        (
            component.clone(),
            context.clone(),
            level.clone(),
            mapping.clone(),
        ),
        |(comp, ctx, level, mapping)| {
            if comp.is_empty() {
                let default = &mapping[level];

                return if ctx.is_some() {
                    if default == "p" {
                        "span".to_string()
                    } else {
                        default.clone()
                    }
                } else {
                    default.clone()
                };
            } else {
                comp.clone()
            }
        },
    );

    let classes = classes!("typography", level.to_string());
    let inner = html_nested! {
        <StylingBox {variant} {color} class={classes} sx={sx.clone()} component={(*component).clone()}>
            { for props.children.iter() }
        </StylingBox>
    };

    match context {
        Some(context) => {
            html! {
                {inner}
            }
        }
        None => {
            html! {
                <ContextProvider<TypographyContext> context={TypographyContext::default()}>
                    {inner}
                </ContextProvider<TypographyContext>>
            }
        }
    }
}

#[derive(Debug, Clone, PartialEq, Default)]
struct TypographyContext {}