From 6e462dd2ae70c83ce27729632b466b16d8351fc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BC=8A=E6=AC=A7?= <langyo.china@gmail.com>
Date: Sat, 2 Nov 2024 21:54:17 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20some=20theme=20structure?=
 =?UTF-8?q?=20keys.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/src/data/paragraph/mod.rs |   2 -
 .../src/data/paragraph/typography/mod.rs      |   9 +-
 .../src/data/paragraph/typography/size.rs     |  40 ------
 .../src/data/paragraph/typography/sizing.rs   | 102 ++++++++++++++
 packages/theme/Cargo.toml                     |   1 +
 packages/theme/src/context.rs                 |  10 +-
 packages/theme/src/types/component.rs         | 131 ++++++++++++++++++
 packages/theme/src/types/mod.rs               |   2 +
 packages/theme/src/types/palette.rs           |   9 +-
 packages/theme/src/types/skin.rs              |   5 +
 packages/theme/src/types/transition.rs        |   1 +
 packages/theme/src/types/typography.rs        |  15 ++
 website/src/app.rs                            |  29 ++--
 13 files changed, 296 insertions(+), 60 deletions(-)
 delete mode 100644 packages/components/src/data/paragraph/typography/size.rs
 create mode 100644 packages/components/src/data/paragraph/typography/sizing.rs
 create mode 100644 packages/theme/src/types/component.rs

diff --git a/packages/components/src/data/paragraph/mod.rs b/packages/components/src/data/paragraph/mod.rs
index 4cbe85d..7603834 100644
--- a/packages/components/src/data/paragraph/mod.rs
+++ b/packages/components/src/data/paragraph/mod.rs
@@ -7,7 +7,6 @@ mod typography;
 
 mod avatar;
 mod icon;
-mod image;
 
 pub use affix::Affix;
 pub use badge::Badge;
@@ -18,4 +17,3 @@ pub use typography::*;
 
 pub use avatar::Avatar;
 pub use icon::Icon;
-pub use image::Image;
diff --git a/packages/components/src/data/paragraph/typography/mod.rs b/packages/components/src/data/paragraph/typography/mod.rs
index 60503b8..816cd9d 100644
--- a/packages/components/src/data/paragraph/typography/mod.rs
+++ b/packages/components/src/data/paragraph/typography/mod.rs
@@ -7,7 +7,7 @@ mod italic;
 mod mark;
 mod quote;
 mod ruby;
-mod size;
+mod sizing;
 mod split;
 mod underline;
 
@@ -20,6 +20,9 @@ pub use italic::Italic;
 pub use mark::Mark;
 pub use quote::{BlockQuote, Quote};
 pub use ruby::Ruby;
-pub use size::{Size, Sizing};
-pub use split::{Divider, Split};
+pub use sizing::{
+    headers::{H1, H2, H3, H4, H5, H6},
+    Sizing,
+};
+pub use split::{Break, Divider};
 pub use underline::Underline;
diff --git a/packages/components/src/data/paragraph/typography/size.rs b/packages/components/src/data/paragraph/typography/size.rs
deleted file mode 100644
index bda8876..0000000
--- a/packages/components/src/data/paragraph/typography/size.rs
+++ /dev/null
@@ -1,40 +0,0 @@
-use stylist::yew::styled_component;
-use yew::prelude::*;
-
-#[derive(Debug, Clone, Copy, PartialEq)]
-pub enum Size {
-    H1,
-    H2,
-    H3,
-    H4,
-    H5,
-    H6,
-    Px(f64),
-    Em(f64),
-    Rem(f64),
-    Custom(&'static str),
-}
-
-#[derive(Properties, Debug, PartialEq)]
-pub struct Props {
-    #[prop_or_default]
-    pub children: Children,
-    #[prop_or(Size::H1)]
-    pub size: Size,
-}
-
-/// `<Sizing>` component can be used to set the font size.
-#[styled_component]
-pub fn Sizing(props: &Props) -> Html {
-    html! {
-        <div
-            class={css!(r#"
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            "#)}
-        >
-            {props.children.clone()}
-        </div>
-    }
-}
diff --git a/packages/components/src/data/paragraph/typography/sizing.rs b/packages/components/src/data/paragraph/typography/sizing.rs
new file mode 100644
index 0000000..3d9a411
--- /dev/null
+++ b/packages/components/src/data/paragraph/typography/sizing.rs
@@ -0,0 +1,102 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+use hikari_theme::types::FontSize;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or(FontSize::H1)]
+    pub size: FontSize,
+}
+
+/// `<Sizing>` component can be used to set the font size.
+#[styled_component]
+pub fn Sizing(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}
+
+pub mod headers {
+    use stylist::yew::styled_component;
+    use yew::prelude::*;
+
+    use super::Sizing;
+    use hikari_theme::types::FontSize;
+
+    #[derive(Properties, Debug, PartialEq)]
+    pub struct Props {
+        #[prop_or_default]
+        pub children: Children,
+    }
+
+    /// `<H1>` component is like a `<h1>` element in HTML.
+    #[styled_component]
+    pub fn H1(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H1}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H2>` component is like a `<h2>` element in HTML.
+    #[styled_component]
+    pub fn H2(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H2}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H3>` component is like a `<h3>` element in HTML.
+    #[styled_component]
+    pub fn H3(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H3}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H4>` component is like a `<h4>` element in HTML.
+    #[styled_component]
+    pub fn H4(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H4}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H5>` component is like a `<h5>` element in HTML.
+    #[styled_component]
+    pub fn H5(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H5}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H6>` component is like a `<h6>` element in HTML.
+    #[styled_component]
+    pub fn H6(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H6}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+}
diff --git a/packages/theme/Cargo.toml b/packages/theme/Cargo.toml
index 5e1af65..09d5dd5 100644
--- a/packages/theme/Cargo.toml
+++ b/packages/theme/Cargo.toml
@@ -22,3 +22,4 @@ base64 = { workspace = true }
 yuuka = { workspace = true }
 
 yew = { workspace = true }
+stylist = { workspace = true }
diff --git a/packages/theme/src/context.rs b/packages/theme/src/context.rs
index d901010..479b21e 100644
--- a/packages/theme/src/context.rs
+++ b/packages/theme/src/context.rs
@@ -1,3 +1,4 @@
+use serde::{Deserialize, Serialize};
 use yuuka::derive_struct;
 
 use yew::prelude::*;
@@ -7,7 +8,14 @@ use crate::{
     types::{ColorLevel, Palette},
 };
 
-derive_struct!(pub Theme { palette: Palette = COLOR_MAP.clone() });
+derive_struct!(
+    #[derive(PartialEq, Serialize, Deserialize)]
+    pub Theme {
+        palette: Palette = COLOR_MAP.clone(),
+        // FIXME: Maybe we should use `dyn Trait` instead...
+        // skin: Vec<(ComponentType, ComponentSkin)> = Vec::new(),
+    }
+);
 
 #[derive(Properties, Debug, PartialEq)]
 pub struct ThemeContextProviderProps {
diff --git a/packages/theme/src/types/component.rs b/packages/theme/src/types/component.rs
new file mode 100644
index 0000000..84c692b
--- /dev/null
+++ b/packages/theme/src/types/component.rs
@@ -0,0 +1,131 @@
+use serde::{Deserialize, Serialize};
+use yuuka::derive_enum;
+
+derive_enum!(
+    #[derive(PartialEq, Serialize, Deserialize)]
+    pub enum ComponentType {
+        Container(enum Container {
+            Layout(enum Layout {
+                Aside,
+                Container,
+                Main,
+                Header,
+                Footer,
+            }),
+            Place(enum Place {
+                Column,
+                Row,
+                Grid,
+                Space,
+                Divider,
+                Skeleton,
+            }),
+            System(enum System {
+                Flex,
+                Anchor,
+                Modal,
+                Scrollable,
+                Resizable,
+                Draggable,
+                Cursor,
+                Breakpoint,
+            })
+        }),
+        Data(enum Data {
+            Block(enum Block {
+                List,
+                Progress,
+                Tree,
+                Paper,
+                Card,
+                Carousel,
+                Collapse,
+                Masonry,
+            }),
+            Media(enum Media {
+                Image,
+                Charts,
+                Scene,
+            }),
+            Paragraph(enum Paragraph {
+                Typography(enum Typography {
+                    Sub,
+                    Sup,
+                    Bold,
+                    Code,
+                    Sample,
+                    Delete,
+                    IsolateDirection,
+                    OverrideDirection,
+                    Italic,
+                    Mark,
+                    BlockQuote,
+                    Quote,
+                    Ruby,
+                    Size,
+                    Sizing,
+                    Divider,
+                    Split,
+                    Underline,
+                }),
+                Rich,
+                Affix,
+                Avatar,
+                Badge,
+                Chip,
+                Icon,
+            })
+        }),
+        Form(enum Form {
+            Button(enum Button {
+                Button,
+                IconButton,
+                ButtonGroup,
+                Tag,
+            }),
+            Input(enum Input {
+                Text,
+                TextArea,
+                Rich,
+            }),
+            Picker(enum Picker {
+                Color,
+                File,
+                Date,
+                Time,
+                DateTime,
+            }),
+            Selector(enum Selector {
+                MultiSelect,
+                CheckBox,
+                Radio,
+                Select,
+                Switch,
+                Slider,
+                Range,
+                Rating,
+            }),
+        }),
+        Navigation(enum Navigation {
+            Aside(enum Aside {
+                Nav(enum Nav {
+                    TopNav,
+                    BottomNav,
+                }),
+                Breadcrumb,
+                Pagination,
+                Steps,
+                Tabs,
+            }),
+            Modal(enum Modal {
+                Drawer,
+                Menu,
+                MessageBox,
+                Notification,
+                Popover,
+                SpeddDial,
+                Tooltip,
+            })
+        })
+    }
+);
diff --git a/packages/theme/src/types/mod.rs b/packages/theme/src/types/mod.rs
index 610f84f..9da35ca 100644
--- a/packages/theme/src/types/mod.rs
+++ b/packages/theme/src/types/mod.rs
@@ -1,9 +1,11 @@
+mod component;
 mod layout;
 mod palette;
 mod skin;
 mod transition;
 mod typography;
 
+pub use component::*;
 pub use layout::*;
 pub use palette::*;
 pub use skin::*;
diff --git a/packages/theme/src/types/palette.rs b/packages/theme/src/types/palette.rs
index 707bdfb..affe3d1 100644
--- a/packages/theme/src/types/palette.rs
+++ b/packages/theme/src/types/palette.rs
@@ -11,6 +11,13 @@ pub enum ColorType {
     Warning,
 }
 
+#[derive(Debug, PartialEq, Eq, Clone, Copy, Default)]
+pub enum ColorMode {
+    #[default]
+    Light,
+    Dark,
+}
+
 #[derive(Debug, PartialEq, Eq, Clone, Copy, Default)]
 pub enum ColorLevel {
     #[default]
@@ -31,7 +38,7 @@ impl Into<f64> for ColorLevel {
     }
 }
 
-#[derive(Debug, PartialEq, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
 pub struct Palette {
     pub primary: Color,
     pub secondary: Color,
diff --git a/packages/theme/src/types/skin.rs b/packages/theme/src/types/skin.rs
index e69de29..cd8038a 100644
--- a/packages/theme/src/types/skin.rs
+++ b/packages/theme/src/types/skin.rs
@@ -0,0 +1,5 @@
+#[derive(Debug, Clone, PartialEq)]
+pub struct ComponentSkin {
+    pub style: stylist::StyleSource,
+    pub extra_division: Vec<stylist::StyleSource>,
+}
diff --git a/packages/theme/src/types/transition.rs b/packages/theme/src/types/transition.rs
index e69de29..3418cc2 100644
--- a/packages/theme/src/types/transition.rs
+++ b/packages/theme/src/types/transition.rs
@@ -0,0 +1 @@
+// TODO: Allow to add more custom transitions
diff --git a/packages/theme/src/types/typography.rs b/packages/theme/src/types/typography.rs
index e69de29..de599ab 100644
--- a/packages/theme/src/types/typography.rs
+++ b/packages/theme/src/types/typography.rs
@@ -0,0 +1,15 @@
+// TODO: fonts, scales and default font size
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum FontSize {
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+    Px(f64),
+    Em(f64),
+    Rem(f64),
+    Custom(&'static str),
+}
diff --git a/website/src/app.rs b/website/src/app.rs
index cd73050..972937d 100644
--- a/website/src/app.rs
+++ b/website/src/app.rs
@@ -1,10 +1,14 @@
+use serde::{Deserialize, Serialize};
 use yuuka::derive_struct;
 
 use yew_router::prelude::*;
 
 use crate::pages::*;
 use hikari_boot::{DeclType, DeriveApplication, DeriveRoutes, RoutesOutsideProps};
-use hikari_theme::context::{Theme, ThemeContextShell};
+use hikari_theme::{
+    context::{Theme, ThemeContextShell},
+    types::ComponentType,
+};
 
 #[derive(PartialEq, Clone, Debug, DeriveRoutes, Routable)]
 pub enum Routes {
@@ -25,18 +29,17 @@ pub enum Routes {
     NotFound,
 }
 
-derive_struct!(AppStates {
-    theme: Theme,
-    data: enum PageData {
-        Portal
-        Guide { id: String, raw: String }
-        Component(enum {
-            Button,
-            ButtonGroup,
-            // TODO: Add more components.
-        })
-    } = Portal
-});
+derive_struct!(
+    #[derive(PartialEq, Serialize, Deserialize)]
+    AppStates {
+        theme: Theme,
+        data: enum PageData {
+            Portal
+            Guide { id: String, raw: String }
+            Component(ComponentType)
+        } = Portal
+    }
+);
 
 #[derive(Clone, Debug, DeriveApplication)]
 pub struct App;