From 445d979fb8476615a06f16f6c98b806d9070d8af Mon Sep 17 00:00:00 2001 From: Peter Kalverla Date: Thu, 22 Aug 2024 08:24:26 +0200 Subject: [PATCH 1/7] Move welcome message to about page --- apps/class-solid/src/routes/about.tsx | 2 +- apps/class-solid/src/routes/index.tsx | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/class-solid/src/routes/about.tsx b/apps/class-solid/src/routes/about.tsx index 36795aa..1a29ce8 100644 --- a/apps/class-solid/src/routes/about.tsx +++ b/apps/class-solid/src/routes/about.tsx @@ -4,7 +4,7 @@ export default function About() { return (

- About Page + Welcome to CLASS

Here, we're developing a new version of CLASS that can run in the diff --git a/apps/class-solid/src/routes/index.tsx b/apps/class-solid/src/routes/index.tsx index c0ea938..7d46e15 100644 --- a/apps/class-solid/src/routes/index.tsx +++ b/apps/class-solid/src/routes/index.tsx @@ -11,10 +11,6 @@ import { analyses } from "~/lib/store"; export default function Home() { return (

-

- Welcome to CLASS -

-

Experiments

From b9f42bda0401b76b02f4f66293eb5c5d1e57a911 Mon Sep 17 00:00:00 2001 From: Peter Kalverla Date: Thu, 22 Aug 2024 09:21:30 +0200 Subject: [PATCH 2/7] Move add experiment/analysis buttons under a dropdown menu --- apps/class-solid/src/components/icons.tsx | 18 ++ .../src/components/ui/dropdown-menu.tsx | 260 ++++++++++++++++++ apps/class-solid/src/routes/index.tsx | 103 +++---- 3 files changed, 335 insertions(+), 46 deletions(-) create mode 100644 apps/class-solid/src/components/ui/dropdown-menu.tsx diff --git a/apps/class-solid/src/components/icons.tsx b/apps/class-solid/src/components/icons.tsx index e474039..f87a3db 100644 --- a/apps/class-solid/src/components/icons.tsx +++ b/apps/class-solid/src/components/icons.tsx @@ -68,3 +68,21 @@ export function MdiDelete(props: JSX.IntrinsicElements["svg"]) { ); } + +export function MdiPlusBox(props: JSX.IntrinsicElements["svg"]) { + return ( + // biome-ignore lint/a11y/noSvgWithoutTitle: generated code + + + + ); +} diff --git a/apps/class-solid/src/components/ui/dropdown-menu.tsx b/apps/class-solid/src/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..c7ddd0f --- /dev/null +++ b/apps/class-solid/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,260 @@ +import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" +import { splitProps } from "solid-js" + +import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu" +import type { PolymorphicProps } from "@kobalte/core/polymorphic" + +import { cn } from "~/lib/utils" + +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger +const DropdownMenuPortal = DropdownMenuPrimitive.Portal +const DropdownMenuSub = DropdownMenuPrimitive.Sub +const DropdownMenuGroup = DropdownMenuPrimitive.Group +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + +const DropdownMenu: Component = (props) => { + return +} + +type DropdownMenuContentProps = + DropdownMenuPrimitive.DropdownMenuContentProps & { + class?: string | undefined + } + +const DropdownMenuContent = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuContentProps, ["class"]) + return ( + + + + ) +} + +type DropdownMenuItemProps = + DropdownMenuPrimitive.DropdownMenuItemProps & { + class?: string | undefined + } + +const DropdownMenuItem = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuItemProps, ["class"]) + return ( + + ) +} + +const DropdownMenuShortcut: Component> = (props) => { + const [, rest] = splitProps(props, ["class"]) + return +} + +const DropdownMenuLabel: Component & { inset?: boolean }> = (props) => { + const [, rest] = splitProps(props, ["class", "inset"]) + return ( +
+ ) +} + +type DropdownMenuSeparatorProps = + DropdownMenuPrimitive.DropdownMenuSeparatorProps & { + class?: string | undefined + } + +const DropdownMenuSeparator = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]) + return ( + + ) +} + +type DropdownMenuSubTriggerProps = + DropdownMenuPrimitive.DropdownMenuSubTriggerProps & { + class?: string | undefined + children?: JSX.Element + } + +const DropdownMenuSubTrigger = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, ["class", "children"]) + return ( + + {props.children} + + + + + ) +} + +type DropdownMenuSubContentProps = + DropdownMenuPrimitive.DropdownMenuSubContentProps & { + class?: string | undefined + } + +const DropdownMenuSubContent = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"]) + return ( + + ) +} + +type DropdownMenuCheckboxItemProps = + DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & { + class?: string | undefined + children?: JSX.Element + } + +const DropdownMenuCheckboxItem = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]) + return ( + + + + + + + + + {props.children} + + ) +} + +type DropdownMenuGroupLabelProps = + DropdownMenuPrimitive.DropdownMenuGroupLabelProps & { + class?: string | undefined + } + +const DropdownMenuGroupLabel = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ["class"]) + return ( + + ) +} + +type DropdownMenuRadioItemProps = + DropdownMenuPrimitive.DropdownMenuRadioItemProps & { + class?: string | undefined + children?: JSX.Element + } + +const DropdownMenuRadioItem = ( + props: PolymorphicProps> +) => { + const [, rest] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"]) + return ( + + + + + + + + + {props.children} + + ) +} + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuPortal, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuShortcut, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, + DropdownMenuCheckboxItem, + DropdownMenuGroup, + DropdownMenuGroupLabel, + DropdownMenuRadioGroup, + DropdownMenuRadioItem +} diff --git a/apps/class-solid/src/routes/index.tsx b/apps/class-solid/src/routes/index.tsx index 7d46e15..0f99c28 100644 --- a/apps/class-solid/src/routes/index.tsx +++ b/apps/class-solid/src/routes/index.tsx @@ -2,7 +2,15 @@ import { For, Show } from "solid-js"; import { AnalysisCard, addAnalysis } from "~/components/Analysis"; import { ExperimentCard } from "~/components/Experiment"; -import { Button } from "~/components/ui/button"; +import { MdiPlusBox } from "~/components/icons"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "~/components/ui/dropdown-menu"; import { Flex } from "~/components/ui/flex"; import { addExperiment, experiments } from "~/lib/store"; @@ -11,60 +19,63 @@ import { analyses } from "~/lib/store"; export default function Home() { return (
-

Experiments

+

+ Experiments + + + + + + Add experiment + + addExperiment()}> + Default settings + + + Upload (not implemented) + + + Preset (not implemented) + + + +

+ {(experiment) => ExperimentCard(experiment)} -
-
- -
-
- {" "} -
-
- -
-
-

Analysis

+

+ Analysis + + + + + + + Add analysis + + addAnalysis()}> + Card + + addAnalysis("timeseries")}> + Timeseries + + + Vertical profile (not implemented) + + + Skew-T diagram (not implemented) + + + + +

Add an experiment first

}> {(analysis) => AnalysisCard(analysis)} -
-
- -
-
- -
-
- -
-
- -
-
From 1358247d6aff61478ae28488deee8eb2e1e9d5af Mon Sep 17 00:00:00 2001 From: Peter Kalverla Date: Thu, 22 Aug 2024 09:21:43 +0200 Subject: [PATCH 3/7] Suppress lint warnings in generated code --- .../src/components/ui/dropdown-menu.tsx | 193 ++++++++++-------- 1 file changed, 109 insertions(+), 84 deletions(-) diff --git a/apps/class-solid/src/components/ui/dropdown-menu.tsx b/apps/class-solid/src/components/ui/dropdown-menu.tsx index c7ddd0f..a5962ed 100644 --- a/apps/class-solid/src/components/ui/dropdown-menu.tsx +++ b/apps/class-solid/src/components/ui/dropdown-menu.tsx @@ -1,114 +1,131 @@ -import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js" -import { splitProps } from "solid-js" +import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"; +import { splitProps } from "solid-js"; -import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu" -import type { PolymorphicProps } from "@kobalte/core/polymorphic" +import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu"; +import type { PolymorphicProps } from "@kobalte/core/polymorphic"; -import { cn } from "~/lib/utils" +import { cn } from "~/lib/utils"; -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger -const DropdownMenuPortal = DropdownMenuPrimitive.Portal -const DropdownMenuSub = DropdownMenuPrimitive.Sub -const DropdownMenuGroup = DropdownMenuPrimitive.Group -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; +const DropdownMenuPortal = DropdownMenuPrimitive.Portal; +const DropdownMenuSub = DropdownMenuPrimitive.Sub; +const DropdownMenuGroup = DropdownMenuPrimitive.Group; +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; -const DropdownMenu: Component = (props) => { - return -} +const DropdownMenu: Component = ( + props, +) => { + return ; +}; type DropdownMenuContentProps = DropdownMenuPrimitive.DropdownMenuContentProps & { - class?: string | undefined - } + class?: string | undefined; + }; const DropdownMenuContent = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuContentProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuContentProps, ["class"]); return ( - ) -} + ); +}; type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps & { - class?: string | undefined - } + class?: string | undefined; + }; const DropdownMenuItem = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuItemProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuItemProps, ["class"]); return ( - ) -} + ); +}; const DropdownMenuShortcut: Component> = (props) => { - const [, rest] = splitProps(props, ["class"]) - return -} + const [, rest] = splitProps(props, ["class"]); + return ( + + ); +}; -const DropdownMenuLabel: Component & { inset?: boolean }> = (props) => { - const [, rest] = splitProps(props, ["class", "inset"]) +const DropdownMenuLabel: Component< + ComponentProps<"div"> & { inset?: boolean } +> = (props) => { + const [, rest] = splitProps(props, ["class", "inset"]); return (
- ) -} + ); +}; type DropdownMenuSeparatorProps = DropdownMenuPrimitive.DropdownMenuSeparatorProps & { - class?: string | undefined - } + class?: string | undefined; + }; const DropdownMenuSeparator = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]); return ( - ) -} + ); +}; type DropdownMenuSubTriggerProps = DropdownMenuPrimitive.DropdownMenuSubTriggerProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; const DropdownMenuSubTrigger = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, ["class", "children"]) + const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, [ + "class", + "children", + ]); return ( {props.children} + {/* biome-ignore lint/a11y/noSvgWithoutTitle: generated code */} ( - ) -} + ); +}; type DropdownMenuSubContentProps = DropdownMenuPrimitive.DropdownMenuSubContentProps & { - class?: string | undefined - } + class?: string | undefined; + }; const DropdownMenuSubContent = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"]); return ( - ) -} + ); +}; type DropdownMenuCheckboxItemProps = DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; const DropdownMenuCheckboxItem = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]) + const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, [ + "class", + "children", + ]); return ( + {/* biome-ignore lint/a11y/noSvgWithoutTitle: generated code */} ( {props.children} - ) -} + ); +}; type DropdownMenuGroupLabelProps = DropdownMenuPrimitive.DropdownMenuGroupLabelProps & { - class?: string | undefined - } + class?: string | undefined; + }; const DropdownMenuGroupLabel = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ["class"]) + const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ["class"]); return ( - ) -} + ); +}; type DropdownMenuRadioItemProps = DropdownMenuPrimitive.DropdownMenuRadioItemProps & { - class?: string | undefined - children?: JSX.Element - } + class?: string | undefined; + children?: JSX.Element; + }; const DropdownMenuRadioItem = ( - props: PolymorphicProps> + props: PolymorphicProps>, ) => { - const [, rest] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"]) + const [, rest] = splitProps(props as DropdownMenuRadioItemProps, [ + "class", + "children", + ]); return ( + {/* biome-ignore lint/a11y/noSvgWithoutTitle: generated code */} ( {props.children} - ) -} + ); +}; export { DropdownMenu, @@ -256,5 +281,5 @@ export { DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuRadioGroup, - DropdownMenuRadioItem -} + DropdownMenuRadioItem, +}; From 45995a98956fd1c889a4e1d477701c015eca2180 Mon Sep 17 00:00:00 2001 From: Peter Kalverla Date: Thu, 22 Aug 2024 10:03:27 +0200 Subject: [PATCH 4/7] Fix tests --- apps/class-solid/tests/index.spec.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/apps/class-solid/tests/index.spec.ts b/apps/class-solid/tests/index.spec.ts index 62a4bef..da1f0cd 100644 --- a/apps/class-solid/tests/index.spec.ts +++ b/apps/class-solid/tests/index.spec.ts @@ -1,9 +1,23 @@ import { expect, test } from "@playwright/test"; test("has welcome", async ({ page }) => { + await page.goto("/about"); + + await expect( + page.getByRole("heading", { name: "Welcome to CLASS" }) + ).toBeVisible(); +}); + +test("has experiments", async ({ page }) => { await page.goto("/"); await expect( - page.getByRole("heading", { name: "Welcome to CLASS" }), + page.getByRole("heading", { name: "Experiments" }) ).toBeVisible(); }); + +test("has analysis", async ({ page }) => { + await page.goto("/"); + + await expect(page.getByRole("heading", { name: "Analysis" })).toBeVisible(); +}); From b2231db82c6ef2de86a24458238023d581147fcb Mon Sep 17 00:00:00 2001 From: Peter Kalverla Date: Thu, 22 Aug 2024 10:05:28 +0200 Subject: [PATCH 5/7] lint fix --- apps/class-solid/tests/index.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/class-solid/tests/index.spec.ts b/apps/class-solid/tests/index.spec.ts index da1f0cd..d22f736 100644 --- a/apps/class-solid/tests/index.spec.ts +++ b/apps/class-solid/tests/index.spec.ts @@ -4,7 +4,7 @@ test("has welcome", async ({ page }) => { await page.goto("/about"); await expect( - page.getByRole("heading", { name: "Welcome to CLASS" }) + page.getByRole("heading", { name: "Welcome to CLASS" }), ).toBeVisible(); }); @@ -12,7 +12,7 @@ test("has experiments", async ({ page }) => { await page.goto("/"); await expect( - page.getByRole("heading", { name: "Experiments" }) + page.getByRole("heading", { name: "Experiments" }), ).toBeVisible(); }); From 4cd9f0f4ccb14d43555a2b5685454e44ffd6ab1e Mon Sep 17 00:00:00 2001 From: Peter Kalverla Date: Tue, 17 Sep 2024 07:55:18 +0200 Subject: [PATCH 6/7] Apply suggestions from code review Co-authored-by: Stefan Verhoeven --- apps/class-solid/src/routes/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/class-solid/src/routes/index.tsx b/apps/class-solid/src/routes/index.tsx index 0f99c28..d21c85f 100644 --- a/apps/class-solid/src/routes/index.tsx +++ b/apps/class-solid/src/routes/index.tsx @@ -28,7 +28,7 @@ export default function Home() { Add experiment - addExperiment()}> + addExperiment()} class="cursor-pointer"> Default settings @@ -58,7 +58,7 @@ export default function Home() { Add analysis addAnalysis()}> - Card + Final height addAnalysis("timeseries")}> Timeseries From c42f11775402780bf540c829c336eb89391cd0eb Mon Sep 17 00:00:00 2001 From: Peter Kalverla Date: Tue, 17 Sep 2024 07:56:21 +0200 Subject: [PATCH 7/7] suggestions from code review --- apps/class-solid/src/routes/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/class-solid/src/routes/index.tsx b/apps/class-solid/src/routes/index.tsx index d21c85f..0fa9b13 100644 --- a/apps/class-solid/src/routes/index.tsx +++ b/apps/class-solid/src/routes/index.tsx @@ -28,8 +28,11 @@ export default function Home() { Add experiment - addExperiment()} class="cursor-pointer"> - Default settings + addExperiment()} + class="cursor-pointer" + > + From scratch Upload (not implemented)