diff --git a/.DS_Store b/.DS_Store index 5008ddfc..cc4bd461 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.github/workflows/all_components.yml b/.github/workflows/all_components.yml new file mode 100644 index 00000000..36ea7822 --- /dev/null +++ b/.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 diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index 7fc8a95f..3c1301f2 100644 --- a/.github/workflows/preview.yml +++ b/.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 diff --git a/Cargo.lock b/Cargo.lock index 37530d52..ae340530 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2151,6 +2151,19 @@ dependencies = [ "tracing", ] +[[package]] +name = "dioxus-primitives" +version = "0.0.1" +source = "git+https://github.com/DioxusLabs/components#0067c31415c26b6215909f573d6c03d3624990d5" +dependencies = [ + "dioxus", + "dioxus-time", + "lazy-js-bundle 0.6.2", + "num-integer", + "time", + "tracing", +] + [[package]] name = "dioxus-router" version = "0.7.0-rc.3" @@ -5621,7 +5634,7 @@ version = "0.1.0" dependencies = [ "dioxus", "dioxus-i18n", - "dioxus-primitives", + "dioxus-primitives 0.0.1", "pulldown-cmark", "strum", "syntect", @@ -7263,6 +7276,14 @@ dependencies = [ "winapi-util", ] +[[package]] +name = "test-harness" +version = "0.1.0" +dependencies = [ + "dioxus", + "dioxus-primitives 0.0.1 (git+https://github.com/DioxusLabs/components)", +] + [[package]] name = "thin-vec" version = "0.2.14" diff --git a/Cargo.toml b/Cargo.toml index d0ce5af8..c87217f5 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [workspace] resolver = "3" -members = ["primitives", "preview"] +members = ["primitives", "preview", "test-harness"] [workspace.dependencies] dioxus-primitives = { path = "primitives" } diff --git a/preview/src/components/date_picker/component.rs b/preview/src/components/date_picker/component.rs index 87ffb181..f82bac33 100644 --- a/preview/src/components/date_picker/component.rs +++ b/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 { diff --git a/preview/src/components/mod.rs b/preview/src/components/mod.rs index c28ca19d..53aa0a9a 100644 --- a/preview/src/components/mod.rs +++ b/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; $( diff --git a/test-harness/.gitignore b/test-harness/.gitignore new file mode 100644 index 00000000..80aab8ea --- /dev/null +++ b/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 diff --git a/test-harness/Cargo.toml b/test-harness/Cargo.toml new file mode 100644 index 00000000..17832f65 --- /dev/null +++ b/test-harness/Cargo.toml @@ -0,0 +1,17 @@ +[package] +name = "test-harness" +version = "0.1.0" +authors = ["Evan Almloff "] +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"] diff --git a/test-harness/assets/dx-components-theme.css b/test-harness/assets/dx-components-theme.css new file mode 100644 index 00000000..6d51a267 --- /dev/null +++ b/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; + } +} diff --git a/test-harness/assets/favicon.ico b/test-harness/assets/favicon.ico new file mode 100644 index 00000000..eed0c097 Binary files /dev/null and b/test-harness/assets/favicon.ico differ diff --git a/test-harness/assets/header.svg b/test-harness/assets/header.svg new file mode 100644 index 00000000..59c96f2f --- /dev/null +++ b/test-harness/assets/header.svg @@ -0,0 +1,20 @@ + \ No newline at end of file diff --git a/test-harness/assets/main.css b/test-harness/assets/main.css new file mode 100644 index 00000000..90c0fc1c --- /dev/null +++ b/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; +} + + + diff --git a/test-harness/src/components/mod.rs b/test-harness/src/components/mod.rs new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/test-harness/src/components/mod.rs @@ -0,0 +1 @@ + diff --git a/test-harness/src/main.rs b/test-harness/src/main.rs new file mode 100644 index 00000000..934da1ec --- /dev/null +++ b/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" } + } + } + } +}