From 8a59cf7ea34c4bd23b09e95a3015d3f66b780ff4 Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Fri, 22 Aug 2025 12:07:26 +0100 Subject: [PATCH 1/4] feat(ui): add NavSection component --- .../NavSection/NavSection.module.css | 16 +++++++++ .../NavSection/NavSection.stories.tsx | 35 +++++++++++++++++++ .../src/components/NavSection/NavSection.tsx | 35 +++++++++++++++++++ 3 files changed, 86 insertions(+) create mode 100644 pkgs/clan-app/ui/src/components/NavSection/NavSection.module.css create mode 100644 pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx create mode 100644 pkgs/clan-app/ui/src/components/NavSection/NavSection.tsx diff --git a/pkgs/clan-app/ui/src/components/NavSection/NavSection.module.css b/pkgs/clan-app/ui/src/components/NavSection/NavSection.module.css new file mode 100644 index 000000000..137fcbc37 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/NavSection/NavSection.module.css @@ -0,0 +1,16 @@ +.navSection { + @apply w-full flex gap-2 items-center justify-between; + @apply rounded-md px-4 py-5 bg-def-2; + + .meta { + @apply flex flex-col gap-2; + } + + &:hover { + @apply bg-def-3 cursor-pointer; + } + + &:active { + @apply bg-def-4; + } +} diff --git a/pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx b/pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx new file mode 100644 index 000000000..6be586a14 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/NavSection/NavSection.stories.tsx @@ -0,0 +1,35 @@ +import type { Meta, StoryObj } from "@kachurun/storybook-solid"; +import { + NavSection, + NavSectionProps, +} from "@/src/components/NavSection/NavSection"; + +const meta: Meta = { + title: "Components/NavSection", + component: NavSection, + decorators: [ + (Story: StoryObj) => ( +
+ +
+ ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + label: "My Clan", + }, +}; + +export const WithDescription: Story = { + args: { + ...Default.args, + description: + "This is my Clan. There are many Clans like it, but this one is mine", + }, +}; diff --git a/pkgs/clan-app/ui/src/components/NavSection/NavSection.tsx b/pkgs/clan-app/ui/src/components/NavSection/NavSection.tsx new file mode 100644 index 000000000..dcf7e597f --- /dev/null +++ b/pkgs/clan-app/ui/src/components/NavSection/NavSection.tsx @@ -0,0 +1,35 @@ +import cx from "classnames"; +import styles from "./NavSection.module.css"; +import { Button } from "@kobalte/core/button"; +import Icon from "../Icon/Icon"; +import { Typography } from "../Typography/Typography"; +import { Show } from "solid-js"; + +export interface NavSectionProps { + label: string; + description?: string; + onClick: () => void; +} + +export const NavSection = (props: NavSectionProps) => { + return ( + + ); +}; From 878789cf38e2a297e4f06377e0965f9ed94a0d97 Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Fri, 22 Aug 2025 12:11:22 +0100 Subject: [PATCH 2/4] feat(ui): use NavSection in ListClansModal --- .../ListClansModal/ListClansModal.module.css | 9 --------- .../ListClansModal/ListClansModal.tsx | 19 +++++-------------- 2 files changed, 5 insertions(+), 23 deletions(-) diff --git a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css index ee091fc39..a59a22a99 100644 --- a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css +++ b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css @@ -12,13 +12,4 @@ .clans { @apply flex flex-col gap-2; } - - .clan { - @apply flex items-center justify-between; - @apply px-4 py-5 bg-def-2; - - .meta { - @apply flex flex-col gap-1; - } - } } diff --git a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx index 022a5d415..a6fe0ed96 100644 --- a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx +++ b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx @@ -9,6 +9,7 @@ import { For, Show } from "solid-js"; import { activeClanURI, clanURIs, setActiveClanURI } from "@/src/stores/clan"; import { useClanListQuery } from "@/src/hooks/queries"; import { Alert } from "@/src/components/Alert/Alert"; +import { NavSection } from "../NavSection/NavSection"; export interface ListClansModalProps { onClose?: () => void; @@ -78,20 +79,10 @@ export const ListClansModal = (props: ListClansModalProps) => {
    {(clan) => ( -
  • -
    - - {clan.data.name} - - - {clan.data.description} - -
    - -
    • From 1897b7bb06143a5ea40c87d213c07f6540ddad5e Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Fri, 22 Aug 2025 12:15:16 +0100 Subject: [PATCH 3/4] feat(ui): use NavSection in installer workflow --- .../src/workflows/Install/steps/Initial.tsx | 101 +++--------------- 1 file changed, 17 insertions(+), 84 deletions(-) diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx index 8c048fd8c..7747a8bc8 100644 --- a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx +++ b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx @@ -3,53 +3,20 @@ import { InstallSteps } from "../install"; import { Typography } from "@/src/components/Typography/Typography"; import { Button } from "@/src/components/Button/Button"; import { StepLayout } from "../../Steps"; +import { NavSection } from "@/src/components/NavSection/NavSection"; const ChoiceLocalOrRemote = () => { const stepSignal = useStepper(); return (
    -
    -
    -
    - - I have physical access to the machine. - -
    -
    -
    -
    -
    -
    - - The Machine is remote and i have ssh access to it. - -
    -
    -
    + stepSignal.setActiveStep("local:choice")} + /> + stepSignal.setActiveStep("install:address")} + />
    ); }; @@ -60,48 +27,14 @@ const ChoiceLocalInstaller = () => { -
    -
    -
    - - I have an installer - -
    -
    -
    -
    -
    -
    - - I don't have an installer, yet - -
    -
    -
    + stepSignal.setActiveStep("install:address")} + /> + stepSignal.setActiveStep("create:prose")} + /> } footer={ From 99092a6ef2086d41033d582868893686123d3a1f Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Fri, 22 Aug 2025 12:16:21 +0100 Subject: [PATCH 4/4] chore(ui): lint --- pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx index 7747a8bc8..e6036f94b 100644 --- a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx +++ b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx @@ -1,6 +1,5 @@ import { defineSteps, useStepper } from "@/src/hooks/stepper"; import { InstallSteps } from "../install"; -import { Typography } from "@/src/components/Typography/Typography"; import { Button } from "@/src/components/Button/Button"; import { StepLayout } from "../../Steps"; import { NavSection } from "@/src/components/NavSection/NavSection";