Merge branch 'main' into main

Author: ddudenin

.github/workflows/stylelint.yml

@@ -0,0 +1,49 @@
+name: Stylelint Checks
+
+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:
+  stylelint:
+    if: github.event.pull_request.draft == false
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      # Do our best to cache the toolchain and node install steps
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: |
+          npm install --save-dev stylelint-config-idiomatic-order
+          npm install -g stylelint stylelint-config-standard
+      - name: Stylelint
+        run: cd ./preview && npx stylelint "**/*.css" --max-warnings=0

Cargo.toml

@@ -7,3 +7,11 @@ dioxus-primitives = { path = "primitives" }
 
 dioxus = "0.7.0"
 tracing = { version = "0.1", features = ["std"] }
+
+[profile.release]
+opt-level = "z"
+debug = false
+lto = true
+codegen-units = 1
+strip = true
+incremental = false

README.md

@@ -33,13 +33,14 @@ Building styled and more featured component libraries on top of Dioxus Primitive
 
 We're still in the early days - Many components are still being created and stabilized.
 
-28/29
+31/31
 
 - [x] Accordion
 - [x] Alert Dialog
 - [x] Aspect Ratio
 - [x] Avatar
 - [x] Calendar
+- [x] Card
 - [x] Checkbox
 - [x] Collapsible
 - [x] Context Menu
@@ -56,9 +57,11 @@ We're still in the early days - Many components are still being created and stab
 - [x] Scroll Area
 - [x] Select
 - [x] Separator
+- [x] Sheet
 - [x] Slider
 - [x] Switch
 - [x] Tabs
+- [x] Textarea
 - [x] Toast
 - [x] Toggle
 - [x] Toggle Group

component.json

@@ -33,6 +33,10 @@
     "preview/src/components/context_menu",
     "preview/src/components/aspect_ratio",
     "preview/src/components/scroll_area",
-    "preview/src/components/date_picker"
+    "preview/src/components/date_picker",
+    "preview/src/components/textarea",
+    "preview/src/components/skeleton",
+    "preview/src/components/card",
+    "preview/src/components/sheet"
   ]
 }

playwright/sheet.spec.ts

@@ -0,0 +1,78 @@
+import { test, expect } from '@playwright/test';
+
+test('sheet basic interactions', async ({ page }) => {
+  await page.goto('http://127.0.0.1:8080/component/?name=sheet&', { timeout: 20 * 60 * 1000 });
+
+  // Open sheet from Right button
+  await page.getByRole('button', { name: 'Right' }).click();
+
+  // Assert the sheet is open
+  const sheet = page.locator('.sheet-root');
+  await expect(sheet).toHaveAttribute('data-state', 'open');
+
+  // Assert the first input is focused (focus trap)
+  const nameInput = page.locator('#sheet-demo-name');
+  await expect(nameInput).toBeFocused();
+
+  // Tab through focusable elements and verify focus cycles
+  // Tab: name input -> username input -> Save button -> Cancel button -> close button -> name input
+  await page.keyboard.press('Tab');
+  const usernameInput = page.locator('#sheet-demo-username');
+  await expect(usernameInput).toBeFocused();
+
+  await page.keyboard.press('Tab');
+  const saveButton = page.getByRole('button', { name: 'Save changes' });
+  await expect(saveButton).toBeFocused();
+
+  await page.keyboard.press('Tab');
+  const cancelButton = page.getByRole('button', { name: 'Cancel' });
+  await expect(cancelButton).toBeFocused();
+
+  await page.keyboard.press('Tab');
+  const closeButton = sheet.locator('.sheet-close');
+  await expect(closeButton).toBeFocused();
+
+  // Tab again should cycle back to first input
+  await page.keyboard.press('Tab');
+  await expect(nameInput).toBeFocused();
+
+  // Hitting escape should close the sheet
+  await page.keyboard.press('Escape');
+  await expect(sheet).toHaveCount(0);
+
+  // Reopen the sheet
+  await page.getByRole('button', { name: 'Right' }).click();
+  await expect(sheet).toHaveAttribute('data-state', 'open');
+
+  // Click the close button
+  await closeButton.click();
+  await expect(sheet).toHaveCount(0);
+});
+
+test('sheet opens from different sides', async ({ page }) => {
+  await page.goto('http://127.0.0.1:8080/component/?name=sheet&', { timeout: 20 * 60 * 1000 });
+
+  const sheet = page.locator('.sheet-root');
+  const sheetContent = page.locator('[data-slot="sheet-content"]');
+
+  // Test Top
+  await page.getByRole('button', { name: 'Top' }).click();
+  await expect(sheet).toHaveAttribute('data-state', 'open');
+  await expect(sheetContent).toHaveAttribute('data-side', 'top');
+  await page.keyboard.press('Escape');
+  await expect(sheet).toHaveCount(0);
+
+  // Test Bottom
+  await page.getByRole('button', { name: 'Bottom' }).click();
+  await expect(sheet).toHaveAttribute('data-state', 'open');
+  await expect(sheetContent).toHaveAttribute('data-side', 'bottom');
+  await page.keyboard.press('Escape');
+  await expect(sheet).toHaveCount(0);
+
+  // Test Left
+  await page.getByRole('button', { name: 'Left' }).click();
+  await expect(sheet).toHaveAttribute('data-state', 'open');
+  await expect(sheetContent).toHaveAttribute('data-side', 'left');
+  await page.keyboard.press('Escape');
+  await expect(sheet).toHaveCount(0);
+});

preview/assets/hero.css

@@ -1,10 +1,10 @@
 #hero {
     display: flex;
+    height: 40rem;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 0;
-    height: 40rem;
 }
 
 #hero > h1,
@@ -36,24 +36,26 @@
     position: absolute;
     top: 38rem;
     left: 50%;
-    transform: translate(-50%, -50%);
     width: 20px;
     height: 20px;
+    animation: scroll-down-icon-animation 3000ms ease-in-out infinite;
     fill: none;
     stroke: var(--secondary-color-4);
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 2;
-    animation: scroll-down-icon-animation 3000ms ease-in-out infinite;
+    transform: translate(-50%, -50%);
 }
 
 @keyframes scroll-down-icon-animation {
     0% {
         transform: translateY(0);
     }
+
     50% {
         transform: translateY(10px);
     }
+
     100% {
         transform: translateY(0);
     }
@@ -62,11 +64,11 @@
 #hero-search-container {
     display: flex;
     width: 80%;
-    padding: 10px;
     max-width: 800px;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 10px;
     margin: auto;
 }
 
@@ -102,10 +104,10 @@
 }
 
 .explaination {
-    margin-bottom: 1rem;
-    padding-left: 5vw;
-    padding-right: 5vw;
     min-width: 50vw;
+    padding-right: 5vw;
+    padding-left: 5vw;
+    margin-bottom: 1rem;
     text-align: center;
 }
 
@@ -116,8 +118,8 @@
 
 .explaination-box {
     display: flex;
-    max-width: 30vw;
     width: 10rem;
+    max-width: 30vw;
     min-height: 10rem;
     box-sizing: border-box;
     flex-direction: column;

preview/assets/main.css

@@ -187,11 +187,11 @@ body {
 }
 
 .component-description {
-    margin-left: 5vw;
+    max-width: 90vw;
     margin-right: 5vw;
+    margin-left: 5vw;
     font-size: 1em;
     overflow-x: scroll;
-    max-width: 90vw;
 }
 
 .component-installation {

preview/src/components/calendar/style.css

@@ -94,12 +94,12 @@
 .calendar-grid-cell {
     width: 2rem;
     border: none;
+    border-radius: 0.5rem;
     aspect-ratio: 1;
     background: none;
     color: var(--secondary-color-4);
     cursor: pointer;
     font-size: 14px;
-    border-radius: 0.5rem;
 }
 
 .calendar-grid-cell[data-month="current"]:not([data-disabled="true"]):hover {
@@ -130,54 +130,54 @@
 
 .calendar-grid-cell[data-month="current"][data-unavailable="true"] {
     color: var(--secondary-color-6);
-    text-decoration: line-through;
     cursor: not-allowed;
+    text-decoration: line-through;
 }
 
 .calendar-grid-week td {
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
 }
 
 .calendar-grid-week td:first-child .calendar-grid-cell {
-    border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
 }
 
 .calendar-grid-week td:last-child .calendar-grid-cell {
-    border-top-right-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
 }
 
 .calendar-grid-cell[data-month="last"][data-selection-between="true"],
 .calendar-grid-cell[data-month="next"][data-selection-between="true"] {
+    border-radius: 0;
     background-color: var(--primary-color-5);
     color: var(--secondary-color-5);
-    border-radius: 0;
 }
 
 .calendar-grid-cell[data-month="current"][data-selection-between="true"] {
+    border-radius: 0;
     background-color: var(--primary-color-5);
     color: var(--secondary-color-4);
-    border-radius: 0;
 }
 
 td:has(.calendar-grid-cell[data-selection-start="true"]) {
+    padding: 0;
+    margin-top: 1px;
+    margin-bottom: 1px;
     background-color: var(--primary-color-5);
-    border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
-    padding: 0;
-    margin-top: 1;
-    margin-bottom: 1;
+    border-top-left-radius: 0.5rem;
 }
 
 td:has(.calendar-grid-cell[data-selection-end="true"]) {
+    padding: 0;
+    margin-top: 1px;
+    margin-bottom: 1px;
     background-color: var(--primary-color-5);
-    border-top-right-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
-    padding: 0;
-    margin-top: 1;
-    margin-bottom: 1;
+    border-top-right-radius: 0.5rem;
 }
 
 .calendar-grid-cell[data-month="current"][data-selected="true"]:hover {

preview/src/components/card/component.json

@@ -0,0 +1,21 @@
+{
+  "name": "card",
+  "description": "A simple card component",
+  "authors": [
+    "zhiyanzhaijie"
+  ],
+  "exclude": [
+    "variants",
+    "docs.md",
+    "component.json"
+  ],
+  "cargoDependencies": [
+    {
+      "name": "dioxus-primitives",
+      "git": "https://github.com/DioxusLabs/components"
+    }
+  ],
+  "globalAssets": [
+    "../../../assets/dx-components-theme.css"
+  ]
+}