Add start of radix-leptos-menu

RustForWeb · May 10, 2024 · 015fc99 · 015fc99
1 parent d1cf14b
commit 015fc99
Show file tree

Hide file tree

Showing 14 changed files with 429 additions and 2 deletions.
diff --git a/packages/primitives/core/number/src/lib.rs b/packages/primitives/core/number/src/lib.rs
@@ -3,3 +3,7 @@
 //! This is an internal utility, not intended for public usage.
 //!
 //! See [`@radix-ui/number`](https://www.npmjs.com/package/@radix-ui/number) for the original package.
+
+mod number;
+
+pub use number::*;
diff --git a/packages/primitives/core/number/src/number.rs b/packages/primitives/core/number/src/number.rs
@@ -0,0 +1,3 @@
+pub fn clamp(value: f64, [min, max]: [f64; 2]) -> f64 {
+    value.max(min).min(max)
+}
diff --git a/packages/primitives/leptos/menu/Cargo.toml b/packages/primitives/leptos/menu/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "radix-leptos-menu"
+description = "Leptos port of Radix Menu."
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+leptos.workspace = true
+radix-leptos-direction = { path = "../direction", version = "0.0.1" }
+radix-leptos-popper = { path = "../popper", version = "0.0.1" }
diff --git a/packages/primitives/leptos/menu/README.md b/packages/primitives/leptos/menu/README.md
@@ -0,0 +1,13 @@
+<p align="center">
+    <a href="../../../../logo.svg" alt="Rust Radix logo">
+        <img src="../../../../logo.svg" width="300" height="200">
+    </a>
+</p>
+
+<h1 align="center">radix-leptos-menu</h1>
+
+This is an internal utility, not intended for public usage.
+
+## Rust Radix
+
+[Rust Radix](https://github.com/NixySoftware/radix) is a Rust port of [Radix](https://www.radix-ui.com/primitives).
diff --git a/packages/primitives/leptos/menu/example/Cargo.toml b/packages/primitives/leptos/menu/example/Cargo.toml
@@ -0,0 +1,19 @@
+[package]
+name = "radix-leptos-menu-example"
+description = "Example for Radix Leptos Menu."
+publish = false
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+console_log.workspace = true
+console_error_panic_hook.workspace = true
+leptos.workspace = true
+log.workspace = true
+radix-leptos-menu = { path = ".." }
+tailwind_fuse.workspace = true
+web-sys.workspace = true
diff --git a/packages/primitives/leptos/menu/example/Trunk.toml b/packages/primitives/leptos/menu/example/Trunk.toml
@@ -0,0 +1,7 @@
+[[hooks]]
+stage = "pre_build"
+command = "sh"
+command_arguments = [
+    "-c",
+    "npx tailwindcss -i style/tailwind.css -o style/tailwind.output.css",
+]
diff --git a/packages/primitives/leptos/menu/example/index.html b/packages/primitives/leptos/menu/example/index.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+    <head>
+        <link data-trunk rel="css" href="/style/tailwind.output.css" />
+    </head>
+    <body></body>
+</html>
diff --git a/packages/primitives/leptos/menu/example/src/app.rs b/packages/primitives/leptos/menu/example/src/app.rs
@@ -0,0 +1,127 @@
+use leptos::*;
+use radix_leptos_menu::*;
+use tailwind_fuse::*;
+
+// TODO: add router and separate pages for each component, similar to Storybook
+
+#[component]
+pub fn App() -> impl IntoView {
+    view! {
+        <h1 class="text-xl pb-3">Styled</h1>
+
+        <div class="h-[400px] overflow-y-auto">
+            <Styled />
+        </div>
+    }
+}
+
+#[component]
+fn Styled() -> impl IntoView {
+    let item_class = create_memo(move |_| ItemClass::default().to_class());
+
+    view! {
+        <MenuWithAnchor>
+            <MenuItem class=item_class>
+                Undo
+            </MenuItem>
+            <MenuItem class=item_class>
+                Redo
+            </MenuItem>
+            <MenuSeparator />
+            <MenuItem class=item_class>
+                Cut
+            </MenuItem>
+            <MenuItem class=item_class>
+                Copy
+            </MenuItem>
+            <MenuItem class=item_class>
+                Paste
+            </MenuItem>
+        </MenuWithAnchor>
+    }
+}
+
+#[component]
+fn Submenus() -> impl IntoView {
+    view! {}
+}
+
+#[component]
+fn WithLabels() -> impl IntoView {
+    view! {}
+}
+
+#[component]
+fn Typeahead() -> impl IntoView {
+    view! {}
+}
+
+#[component]
+fn CheckboxItems() -> impl IntoView {
+    view! {}
+}
+
+#[component]
+fn RadioItems() -> impl IntoView {
+    view! {}
+}
+
+#[component]
+fn Animated() -> impl IntoView {
+    view! {}
+}
+
+#[component]
+fn MenuWithAnchor(
+    #[prop(into, optional)] open: MaybeProp<bool>,
+    children: Children,
+) -> impl IntoView {
+    let open = Signal::derive(move || open().unwrap_or(true));
+
+    let content_class = create_memo(move |_| ContentClass::default().to_class());
+
+    // TODO: add missing props
+    view! {
+        <Menu open=open modal=false>
+            <MenuAnchor>{""}</MenuAnchor>
+            <MenuPortal>
+                <MenuContent class=content_class>
+                    {children()}
+                </MenuContent>
+            </MenuPortal>
+        </Menu>
+    }
+}
+
+#[component]
+fn Submenu() -> impl IntoView {
+    view! {}
+}
+
+#[derive(TwClass, Default, Clone, Copy)]
+#[tw(
+    class = "inline-block box-border min-w-[130px] bg-[#fff] border border-solid border-[#ccc] rounded-[6px] p-[5px] shadow-[0px_5px_10px_0px_rgba(0,0,0,0.1)] font-['apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif'] text-[13px] focus-within:border-[#111]"
+)]
+pub struct ContentClass {}
+
+#[derive(TwClass, Default, Clone, Copy)]
+#[tw(
+    class = "flex items-center justify-between leading-none cursor-default select-none whitespace-nowrap h-[25px] p-[0px_10px] text-[#ccc] rounded-[3px]"
+)]
+pub struct LabelClass {}
+
+#[derive(TwClass, Default, Clone, Copy)]
+#[tw(
+    class = "flex items-center justify-between leading-none cursor-default select-none whitespace-nowrap h-[25px] p-[0px_10px] text-[#111] rounded-[3px] outline-none data-highlighted:bg-[#111] data-highlighted:text-[#fff] data-disabled:text-[#ccc]"
+)]
+pub struct ItemClass {}
+
+#[derive(TwClass, Default, Clone, Copy)]
+#[tw(
+    class = "flex items-center justify-between leading-none cursor-default select-none whitespace-nowrap h-[25px] p-[0px_10px] text-[#111] rounded-[3px] outline-none data-highlighted:bg-[#111] data-highlighted:text-[#fff] data-disabled:text-[#ccc] [&:not([data-highlighted])[data-state=\"open\"]]:bg-[#ccc] [&:not([data-highlighted])[data-state=\"open\"]]:text-[#111]"
+)]
+pub struct SubTriggerClass {}
+
+#[derive(TwClass, Default, Clone, Copy)]
+#[tw(class = "h-[1px] m-[5px_10px] bg-[#ccc]")]
+pub struct SeparatorClass {}
diff --git a/packages/primitives/leptos/menu/example/src/main.rs b/packages/primitives/leptos/menu/example/src/main.rs
@@ -0,0 +1,10 @@
+mod app;
+
+use crate::app::App;
+
+pub fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    leptos::mount_to_body(App);
+}
diff --git a/packages/primitives/leptos/menu/example/style/tailwind.css b/packages/primitives/leptos/menu/example/style/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/primitives/leptos/menu/example/tailwind.config.js b/packages/primitives/leptos/menu/example/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['*.html', './src/**/*.rs'],
+    theme: {
+        extend: {}
+    },
+    plugins: []
+};
diff --git a/packages/primitives/leptos/menu/src/lib.rs b/packages/primitives/leptos/menu/src/lib.rs
@@ -0,0 +1,9 @@
+//! Leptos port of [Radix Menu](https://www.radix-ui.com/primitives).
+//!
+//! This is an internal utility, not intended for public usage.
+//!
+//! See [`@radix-ui/react-menu`](https://www.npmjs.com/package/@radix-ui/react-menu) for the original package.
+
+mod menu;
+
+pub use menu::*;