Initial commit

src/card.rs

@@ -0,0 +1,109 @@
+use yew::{classes, function_component, html, Children, Classes, Properties};
+
+use super::{Margin, Padding, Text, Width};
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum CardSize {
+    Small,
+}
+
+impl From<CardSize> for Classes {
+    fn from(card_size: CardSize) -> Self {
+        format!("uk-card-{:?}", card_size).to_lowercase().into()
+    }
+}
+
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum CardStyle {
+    Default,
+    Primary,
+    Secondary,
+}
+
+impl From<CardStyle> for Classes {
+    fn from(card_style: CardStyle) -> Self {
+        format!("uk-card-{:?}", card_style).to_lowercase().into()
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct CardProps {
+    #[prop_or_default]
+    pub children: Children, // TODO: enum typed
+    #[prop_or_default]
+    pub size: Option<CardSize>,
+    #[prop_or_default]
+    pub style: Option<CardStyle>,
+    #[prop_or_default]
+    pub hover: bool,
+    #[prop_or_default]
+    pub width: Option<Width>,
+    #[prop_or_default]
+    pub class: Classes,
+}
+
+#[function_component(Card)]
+pub fn card(
+    CardProps {
+        children,
+        size,
+        style,
+        hover,
+        width,
+        class,
+    }: &CardProps,
+) -> Html {
+    html! {
+        <div class={classes!("uk-card", style, size, hover.then(|| "uk-card-hover"), width, class.clone())}>
+          { for children.iter() }
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct CardBodyProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub padding: Vec<Padding>,
+    #[prop_or_default]
+    pub margin: Vec<Margin>,
+}
+
+#[function_component(CardBody)]
+pub fn card_body(
+    CardBodyProps {
+        children,
+        padding,
+        margin,
+    }: &CardBodyProps,
+) -> Html {
+    html! {
+        <div class={classes!("uk-card-body", padding.clone(), margin.clone())}>
+        { for children.iter() }
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct CardTitleProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub text_style: Vec<Text>,
+}
+
+#[function_component(CardTitle)]
+pub fn card_title(
+    CardTitleProps {
+        children,
+        text_style,
+    }: &CardTitleProps,
+) -> Html {
+    html! {
+        <h3 class={classes!("uk-card-title", text_style.clone())}>
+        { for children.iter() }
+        </h3>
+    }
+}

src/container.rs

@@ -0,0 +1,34 @@
+use yew::{classes, function_component, html, Children, Classes, Properties};
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum ContainerSize {
+    XSmall,
+    Small,
+    Large,
+    XLarge,
+    Expand,
+}
+
+impl From<ContainerSize> for Classes {
+    fn from(size: ContainerSize) -> Self {
+        format!("uk-container-{:?}", size).to_lowercase().into()
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ContainerProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub size: Option<ContainerSize>,
+}
+
+#[function_component(Container)]
+pub fn container(ContainerProps { children, size }: &ContainerProps) -> Html {
+    html! {
+        <div class={classes!("uk-container", size)}>
+          { for children.iter() }
+        </div>
+    }
+}

src/divider.rs

@@ -0,0 +1,15 @@
+use super::margin::Margin;
+use yew::{classes, function_component, html, Properties};
+
+#[derive(Properties, PartialEq)]
+pub struct DividerProps {
+    #[prop_or_default]
+    pub margin: Vec<Margin>,
+}
+
+#[function_component(Divider)]
+pub fn divider(DividerProps { margin }: &DividerProps) -> Html {
+    html! {
+        <hr class={classes!(margin.clone())} />
+    }
+}

src/filter.rs

@@ -0,0 +1,54 @@
+use super::width::Width;
+use super::UIKitComponent;
+use yew::{classes, function_component, html, Children, Classes, Html, Properties};
+
+#[derive(Debug, PartialEq)]
+pub struct FilterData {
+    pub class: String,
+    pub label: String,
+}
+
+#[derive(Properties, PartialEq)]
+pub struct FilterProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub target: String,
+    #[prop_or_default]
+    pub filter_width: Option<Width>,
+    #[prop_or_default]
+    pub filter_component: Option<UIKitComponent>,
+    #[prop_or_default]
+    pub filter_class: Classes,
+    #[prop_or_default]
+    pub filters: Vec<FilterData>,
+}
+
+#[function_component(Filter)]
+pub fn filter(
+    FilterProps {
+        children,
+        target,
+        filter_width,
+        filter_component,
+        filter_class,
+        filters,
+    }: &FilterProps,
+) -> Html {
+    let filter = format!("target: {}", target);
+
+    html! {
+        <div uk-filter={filter}>
+            <ul class={classes!(filter_component, filter_class.clone(), filter_width)}>
+                {
+                    filters.iter().map(|FilterData { class, label }|
+                      html! {
+                          <li uk-filter-control={class.clone()}><a href="#">{label}</a></li>
+                      }
+                    ).collect::<Html>()
+                }
+            </ul>
+            { for children.iter() }
+        </div>
+    }
+}

src/flex.rs

@@ -0,0 +1,47 @@
+use super::Width;
+use yew::{classes, function_component, html, Callback, Children, Classes, MouseEvent, Properties};
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum FlexVerticalAlignement {
+    Stretch,
+    Top,
+    Middle,
+    Bottom,
+}
+
+impl From<FlexVerticalAlignement> for Classes {
+    fn from(vertical_alignement: FlexVerticalAlignement) -> Self {
+        format!("uk-flex-{:?}", vertical_alignement)
+            .to_lowercase()
+            .into()
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct FlexProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub vertical_alignement: Option<FlexVerticalAlignement>,
+    #[prop_or_default]
+    pub width: Option<Width>,
+    #[prop_or_default]
+    pub onclick: Callback<MouseEvent>,
+}
+
+#[function_component(Flex)]
+pub fn container(
+    FlexProps {
+        children,
+        vertical_alignement,
+        width,
+        onclick,
+    }: &FlexProps,
+) -> Html {
+    html! {
+        <div class={classes!("uk-flex", vertical_alignement, width)} onclick={onclick}>
+        { for children.iter() }
+        </div>
+    }
+}

src/grid.rs

@@ -0,0 +1,65 @@
+use super::{ChildWidth, FlexVerticalAlignement, Margin, Text};
+use yew::{classes, function_component, html, Children, Classes, Properties};
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum GridGapSize {
+    Small,
+    Medium,
+    Large,
+    Collapse,
+}
+
+impl From<GridGapSize> for Classes {
+    fn from(gap_size: GridGapSize) -> Self {
+        format!("uk-grid-{:?}", gap_size).to_lowercase().into()
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct GridProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub gap_size: Option<GridGapSize>,
+    #[prop_or_default]
+    pub margin: Vec<Margin>,
+    #[prop_or_default]
+    pub height_match: bool,
+    #[prop_or_default]
+    pub vertical_alignement: Option<FlexVerticalAlignement>,
+    #[prop_or_default]
+    pub child_width: Option<ChildWidth>,
+    #[prop_or_default]
+    pub text_style: Vec<Text>,
+    #[prop_or_default]
+    pub class: Classes,
+}
+
+#[function_component(Grid)]
+pub fn grid(
+    GridProps {
+        children,
+        gap_size,
+        margin,
+        height_match,
+        vertical_alignement,
+        child_width,
+        text_style,
+        class,
+    }: &GridProps,
+) -> Html {
+    html! {
+        <div class={classes!(
+            class.clone(),
+            gap_size,
+            margin.clone(),
+            vertical_alignement,
+            child_width,
+            text_style.clone(),
+            height_match.then(|| "uk-grid-match")
+        )} uk-grid="">
+          { for children.iter() }
+        </div>
+    }
+}

src/icon.rs

@@ -0,0 +1,68 @@
+use super::{Margin, Text};
+use regex::Regex;
+use std::fmt;
+use yew::{classes, function_component, html, Callback, MouseEvent, Properties};
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum IconType {
+    Check,
+    FileEdit,
+    Bookmark,
+    TriangleLeft,
+    TriangleRight,
+    TriangleDown,
+    TriangleUp,
+    Plus,
+}
+
+impl fmt::Display for IconType {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        let uppercase_re = Regex::new("(.)([A-Z])").unwrap();
+        write!(
+            f,
+            "{}",
+            uppercase_re
+                .replace(&format!("{:?}", self), "$1-$2")
+                .to_lowercase()
+        )
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct IconProps {
+    pub icon_type: IconType,
+    #[prop_or_default]
+    pub text_style: Vec<Text>,
+    #[prop_or_default]
+    pub margin: Vec<Margin>,
+    #[prop_or_default]
+    pub href: Option<String>,
+    #[prop_or_default]
+    pub onclick: Callback<MouseEvent>,
+}
+
+#[function_component(Icon)]
+pub fn icon(
+    IconProps {
+        icon_type,
+        text_style,
+        margin,
+        href,
+        onclick,
+    }: &IconProps,
+) -> Html {
+    if let Some(href) = href {
+        html! {
+            <a href={href.clone()}
+               onclick={onclick}
+               class={classes!(text_style.clone(), margin.clone())}
+               uk-icon={format!("icon: {}", icon_type)} />
+        }
+    } else {
+        html! {
+            <span class={classes!(text_style.clone(), margin.clone())}
+                  uk-icon={format!("icon: {}", icon_type)} />
+        }
+    }
+}

src/iconnav.rs

@@ -0,0 +1,16 @@
+use yew::{classes, function_component, html, Children, Properties};
+
+#[derive(Properties, PartialEq)]
+pub struct IconNavProps {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(IconNav)]
+pub fn icon_nav(IconNavProps { children }: &IconNavProps) -> Html {
+    html! {
+        <div class={classes!("uk-iconnav")}>
+          { for children.iter() }
+        </div>
+    }
+}

src/lib.rs

@@ -0,0 +1,43 @@
+use yew::Classes;
+
+pub mod card;
+pub mod container;
+pub mod divider;
+pub mod filter;
+pub mod flex;
+pub mod grid;
+pub mod icon;
+pub mod iconnav;
+pub mod link;
+pub mod margin;
+pub mod padding;
+pub mod section;
+pub mod text;
+pub mod width;
+
+pub use card::*;
+pub use container::*;
+pub use divider::*;
+pub use filter::*;
+pub use flex::*;
+pub use grid::*;
+pub use icon::*;
+pub use iconnav::*;
+pub use link::*;
+pub use margin::*;
+pub use padding::*;
+pub use section::*;
+pub use text::*;
+pub use width::*;
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum UIKitComponent {
+    SubNav,
+}
+
+impl From<UIKitComponent> for Classes {
+    fn from(component: UIKitComponent) -> Self {
+        format!("uk-{:?}", component).to_lowercase().into()
+    }
+}

src/link.rs

@@ -0,0 +1,26 @@
+use yew::{function_component, html, Callback, Children, MouseEvent, Properties};
+
+#[derive(Properties, PartialEq)]
+pub struct LinkProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub href: String,
+    #[prop_or_default]
+    pub onclick: Callback<MouseEvent>,
+}
+
+#[function_component(Link)]
+pub fn link(
+    LinkProps {
+        children,
+        href,
+        onclick,
+    }: &LinkProps,
+) -> Html {
+    html! {
+        <a href={href.clone()} onclick={onclick}>
+        { for children.iter() }
+        </a>
+    }
+}

src/margin.rs

@@ -0,0 +1,64 @@
+use regex::Regex;
+use yew::Classes;
+
+#[allow(dead_code)]
+#[allow(non_camel_case_types)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum Margin {
+    Default,
+    Top,
+    Bottom,
+    Left,
+    Right,
+    Small,
+    SmallTop,
+    SmallBottom,
+    SmallLeft,
+    SmallRight,
+    Medium,
+    MediumTop,
+    MediumBottom,
+    MediumLeft,
+    MediumRight,
+    Large,
+    LargeTop,
+    LargeBottom,
+    LargeLeft,
+    LargeRight,
+    Xlarge,
+    XlargeTop,
+    XlargeBottom,
+    XlargeLeft,
+    XlargeRight,
+    Remove,
+    RemoveTop,
+    RemoveBottom,
+    RemoveLeft,
+    RemoveRight,
+    RemoveVertical,
+    RemoveAdjacent,
+    RemoveFirstChild,
+    RemoveLastChild,
+    RemoveLeft_s,
+    RemoveRight_s,
+    RemoveLeft_m,
+    RemoveRight_m,
+    RemoveLeft_l,
+    RemoveRight_l,
+    RemoveLeft_xl,
+    RemoveRight_xl,
+}
+
+impl From<Margin> for Classes {
+    fn from(margin: Margin) -> Self {
+        let uppercase_re = Regex::new("(.)([A-Z])").unwrap();
+        let class = match margin {
+            Margin::Default => "uk-margin".to_string(),
+            _ => uppercase_re
+                .replace(&format!("uk-margin{:?}", margin), "$1-$2")
+                .replace('_', "@")
+                .to_lowercase(),
+        };
+        class.into()
+    }
+}

src/padding.rs

@@ -0,0 +1,30 @@
+use regex::Regex;
+use yew::Classes;
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum Padding {
+    Default,
+    Small,
+    Large,
+    Remove,
+    RemoveTop,
+    RemoveBottom,
+    RemoveLeft,
+    RemoveRight,
+    RemoveVertical,
+    RemoveHorizontal,
+}
+
+impl From<Padding> for Classes {
+    fn from(padding: Padding) -> Self {
+        let uppercase_re = Regex::new("(.)([A-Z])").unwrap();
+        let class = match padding {
+            Padding::Default => "uk-padding".to_string(),
+            _ => uppercase_re
+                .replace(&format!("uk-padding{:?}", padding), "$1-$2")
+                .to_lowercase(),
+        };
+        class.into()
+    }
+}

src/section.rs

@@ -0,0 +1,33 @@
+use yew::{classes, function_component, html, Children, Classes, Properties};
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum SectionStyle {
+    Default,
+    Muted,
+    Primary,
+    Secondary,
+}
+
+impl From<SectionStyle> for Classes {
+    fn from(style: SectionStyle) -> Self {
+        format!("uk-section-{:?}", style).to_lowercase().into()
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct SectionProps {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or_default]
+    pub style: Option<SectionStyle>,
+}
+
+#[function_component(Section)]
+pub fn section(SectionProps { children, style }: &SectionProps) -> Html {
+    html! {
+        <div class={classes!("uk-section", style)}>
+          { for children.iter() }
+        </div>
+    }
+}

src/text.rs

@@ -0,0 +1,65 @@
+use regex::Regex;
+use yew::Classes;
+
+#[allow(dead_code)]
+#[allow(non_camel_case_types)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum Text {
+    Lead,
+    Meta,
+    Small,
+    Default,
+    Large,
+    Light,
+    Normal,
+    Bold,
+    Lighter,
+    Bolder,
+    Italic,
+    Capitalize,
+    Uppercase,
+    LowerCase,
+    DecorationNone,
+    Muted,
+    Emphasis,
+    Primary,
+    Secondary,
+    Success,
+    Warning,
+    Danger,
+    Background,
+    Left,
+    Right,
+    Center,
+    Justify,
+    Top,
+    Middle,
+    Bottom,
+    Baseline,
+    Truncate,
+    Break,
+    Nowrap,
+    Left_s,
+    Center_s,
+    Right_s,
+    Left_m,
+    Center_m,
+    Right_m,
+    Left_l,
+    Center_l,
+    Right_l,
+    Left_xl,
+    Center_xl,
+    Right_xl,
+}
+
+impl From<Text> for Classes {
+    fn from(text: Text) -> Self {
+        let uppercase_re = Regex::new("(.)([A-Z])").unwrap();
+        uppercase_re
+            .replace(&format!("uk-text{:?}", text), "$1-$2")
+            .replace('_', "@")
+            .to_lowercase()
+            .into()
+    }
+}

src/width.rs

@@ -0,0 +1,54 @@
+use yew::Classes;
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum Width {
+    _1_1,
+    _1_2,
+    _1_3,
+    _1_4,
+    _1_5,
+    _1_6,
+    _2_3,
+    _3_4,
+    _4_5,
+    _5_6,
+    _Auto,
+    _Expand,
+    _Small,
+    _Medium,
+    _Large,
+    _XLarge,
+    _2XLarge,
+}
+
+impl From<Width> for Classes {
+    fn from(width: Width) -> Self {
+        format!("uk-width{:?}", width)
+            .replace('_', "-")
+            .to_lowercase()
+            .into()
+    }
+}
+
+#[allow(dead_code)]
+#[derive(Debug, PartialEq, Eq, Copy, Clone)]
+pub enum ChildWidth {
+    _1_1,
+    _1_2,
+    _1_3,
+    _1_4,
+    _1_5,
+    _1_6,
+    _Auto,
+    _Expand,
+}
+
+impl From<ChildWidth> for Classes {
+    fn from(width: ChildWidth) -> Self {
+        format!("uk-child-width{:?}", width)
+            .replace('_', "-")
+            .to_lowercase()
+            .into()
+    }
+}