Fix date picker component import and add tests for dx components add --all to CI

.github/workflows/all_components.yml

@@ -0,0 +1,63 @@
+# name: Add All Components
+
+# on:
+#   push:
+#     branches:
+#       - main
+#     paths:
+#       - /**
+#       - preview/**/*.rs
+#       - preview/**/Cargo.toml
+#       - primitives/**/*.rs
+#       - primitives/**/Cargo.toml
+#       - .github/**
+#       - Cargo.toml
+
+#   pull_request:
+#     types: [opened, synchronize, reopened, ready_for_review]
+#     branches:
+#       - main
+#     paths:
+#       - /**
+#       - preview/**/*.rs
+#       - preview/**/Cargo.toml
+#       - primitives/**/*.rs
+#       - primitives/**/Cargo.toml
+#       - .github/**
+#       - Cargo.toml
+
+# concurrency:
+#   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+#   cancel-in-progress: true
+
+# jobs:
+#   deploy-preview:
+#     if: github.event.pull_request.draft == false
+#     name: Add All Components
+#     runs-on: ubuntu-latest
+#     env:
+#       CARGO_INCREMENTAL: 1
+#     steps:
+#       - name: Checkout code
+#         uses: actions/checkout@v4
+#         with:
+#           ref: "refs/pull/${{ github.event.pull_request.number }}/merge"
+#           fetch-depth: 0
+#       - uses: awalsh128/cache-apt-pkgs-action@latest
+#         with:
+#           packages: libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev libxdo-dev
+#           version: 1.0
+#       - name: Install Rust
+#         uses: dtolnay/rust-toolchain@master
+#         with:
+#           toolchain: stable
+#           targets: x86_64-unknown-linux-gnu,wasm32-unknown-unknown
+#       - uses: Swatinem/rust-cache@v2
+#         with:
+#           cache-all-crates: "true"
+#           cache-on-failure: "false"
+#       - uses: cargo-bins/cargo-binstall@main
+#       - name: Install CLI
+#         run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.3
+#       - name: Add components and check
+#         run: cd test-harness && dx components add --all --path .. --force && cargo check --all-features

.github/workflows/preview.yml

@@ -43,7 +43,7 @@ jobs:
           cache-on-failure: "false"
       - uses: cargo-bins/cargo-binstall@main
       - name: Install CLI
-        run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.0
+        run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.3
       - name: Build
         run: cd preview && dx build --web --release --base-path "components/pr-preview/pr-${{ github.event.pull_request.number }}/"
       - name: Copy output

Cargo.toml

@@ -1,6 +1,6 @@
 [workspace]
 resolver = "3"
-members = ["primitives", "preview"]
+members = ["primitives", "preview", "test-harness"]
 
 [workspace.dependencies]
 dioxus-primitives = { path = "primitives" }

preview/src/components/date_picker/component.rs

@@ -6,8 +6,8 @@ use dioxus_primitives::{
     ContentAlign,
 };
 
-use super::super::calendar::component::*;
-use super::super::popover::component::*;
+use super::super::calendar::*;
+use super::super::popover::*;
 
 #[component]
 pub fn DatePicker(props: DatePickerProps) -> Element {

preview/src/components/mod.rs

@@ -4,6 +4,8 @@ macro_rules! examples {
         $(
             pub(crate) mod $name {
                 pub(crate) mod component;
+                #[allow(unused)]
+                pub use component::*;
                 pub(crate) mod variants {
                     pub(crate) mod main;
                     $(

test-harness/.gitignore

@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target
+.DS_Store
+
+# These are backup files generated by rustfmt
+**/*.rs.bk

test-harness/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "test-harness"
+version = "0.1.0"
+authors = ["Evan Almloff <[email protected]>"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { version = "0.7.0-rc.1", features = [] }
+dioxus-primitives = { git = "https://github.com/DioxusLabs/components", version = "0.0.1", default-features = false, features = ["router"] }
+
+[features]
+default = ["web"]
+web = ["dioxus/web"]
+desktop = ["dioxus/desktop"]
+mobile = ["dioxus/mobile"]

test-harness/assets/dx-components-theme.css

@@ -0,0 +1,83 @@
+/* This file contains the global styles for the styled dioxus components. You only
+ * need to import this file once in your project root.
+ */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+body {
+  padding: 0;
+  margin: 0;
+  background-color: var(--primary-color);
+  color: var(--secondary-color-4);
+  font-family: Inter, sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dark: initial;
+    --light: ;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --dark: ;
+    --light: initial;
+  }
+}
+
+:root {
+  /* Primary colors */
+  --primary-color: var(--dark, #000) var(--light, #fff);
+  --primary-color-1: var(--dark, #0e0e0e) var(--light, #fbfbfb);
+  --primary-color-2: var(--dark, #0a0a0a) var(--light, #fff);
+  --primary-color-3: var(--dark, #141313) var(--light, #f8f8f8);
+  --primary-color-4: var(--dark, #1a1a1a) var(--light, #f8f8f8);
+  --primary-color-5: var(--dark, #262626) var(--light, #f5f5f5);
+  --primary-color-6: var(--dark, #232323) var(--light, #e5e5e5);
+  --primary-color-7: var(--dark, #3e3e3e) var(--light, #b0b0b0);
+
+  /* Secondary colors */
+  --secondary-color: var(--dark, #fff) var(--light, #000);
+  --secondary-color-1: var(--dark, #fafafa) var(--light, #000);
+  --secondary-color-2: var(--dark, #e6e6e6) var(--light, #0d0d0d);
+  --secondary-color-3: var(--dark, #dcdcdc) var(--light, #2b2b2b);
+  --secondary-color-4: var(--dark, #d4d4d4) var(--light, #111);
+  --secondary-color-5: var(--dark, #a1a1a1) var(--light, #848484);
+  --secondary-color-6: var(--dark, #5d5d5d) var(--light, #d0d0d0);
+
+  /* Highlight colors */
+  --focused-border-color: var(--dark, #2b7fff) var(--light, #2b7fff);
+  --primary-success-color: var(--dark, #02271c) var(--light, #ecfdf5);
+  --secondary-success-color: var(--dark, #b6fae3) var(--light, #10b981);
+  --primary-warning-color: var(--dark, #342203) var(--light, #fffbeb);
+  --secondary-warning-color: var(--dark, #feeac7) var(--light, #f59e0b);
+  --primary-error-color: var(--dark, #a22e2e) var(--light, #dc2626);
+  --secondary-error-color: var(--dark, #9b1c1c) var(--light, #ef4444);
+  --contrast-error-color: var(--dark, var(--secondary-color-3))
+    var(--light, var(--primary-color));
+  --primary-info-color: var(--dark, var(--primary-color-5))
+    var(--light, var(--primary-color));
+  --secondary-info-color: var(--dark, var(--primary-color-7))
+    var(--light, var(--secondary-color-3));
+}
+
+/* Modern browsers with `scrollbar-*` support */
+@supports (scrollbar-width: auto) {
+  :not(:hover) {
+    scrollbar-color: rgb(0 0 0 / 0%) rgb(0 0 0 / 0%);
+  }
+
+  :hover {
+    scrollbar-color: var(--secondary-color-2) rgb(0 0 0 / 0%);
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+@supports selector(::-webkit-scrollbar) {
+  :root::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}

test-harness/assets/main.css

@@ -0,0 +1,46 @@
+/* App-wide styling */
+body {
+    background-color: #0f1116;
+    color: #ffffff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 20px;
+}
+
+#hero {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#links {
+    width: 400px;
+    text-align: left;
+    font-size: x-large;
+    color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+#links a {
+    color: white;
+    text-decoration: none;
+    margin-top: 20px;
+    margin: 10px 0px;
+    border: white 1px solid;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+#links a:hover {
+    background-color: #1f1f1f;
+    cursor: pointer;
+}
+
+#header {
+    max-width: 1200px;
+}
+
+
+

test-harness/src/components/mod.rs

@@ -0,0 +1 @@
+

test-harness/src/main.rs

@@ -0,0 +1,39 @@
+use dioxus::prelude::*;
+
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+const MAIN_CSS: Asset = asset!("/assets/main.css");
+const HEADER_SVG: Asset = asset!("/assets/header.svg");
+
+mod components;
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    rsx! {
+        document::Link { rel: "icon", href: FAVICON }
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
+        Hero {}
+
+    }
+}
+
+#[component]
+pub fn Hero() -> Element {
+    rsx! {
+        div {
+            id: "hero",
+            img { src: HEADER_SVG, id: "header" }
+            div { id: "links",
+                a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
+                a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
+                a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
+                a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
+                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
+                a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
+            }
+        }
+    }
+}