Design system/question layout

.vscode/settings.json

@@ -12,5 +12,12 @@
   ],
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "eslint.format.enable": true,
-  "eslint.workingDirectories": [{ "pattern": "./packages/*/" }, { "pattern": "./apps/*/" }],
+  "eslint.workingDirectories": [
+    {
+      "pattern": "./packages/*/"
+    },
+    {
+      "pattern": "./apps/*/"
+    }
+  ],
 }

apps/design-system/stories/bottomBar.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BottomBar } from "@repo/design-system/ui";
+
+const meta: Meta<typeof BottomBar> = {
+  title: "Layout/BottomBar",
+  component: BottomBar,
+};
+
+type BottomBarStory = StoryObj<typeof meta>;
+
+export const Default: BottomBarStory = {};
+
+export default meta;

apps/design-system/stories/iconButton.stories.tsx

@@ -1,5 +1,5 @@
-import { IconButton } from "@repo/design-system/iconButton";
-import { StarIcon } from "@repo/design-system/starIcon";
+import { IconButton } from "@repo/design-system/ui";
+import { StarIcon } from "@repo/design-system/icons";
 import { Meta, StoryObj } from "@storybook/react";
 
 export default {

apps/design-system/stories/question.stories.tsx → apps/design-system/stories/questionCard.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Question } from "@repo/design-system/ui";
+import { QuestionCard } from "@repo/design-system/ui";
 
-const meta: Meta<typeof Question> = {
-  title: "Layouts/Question",
-  component: Question,
+const meta: Meta<typeof QuestionCard> = {
+  title: "Layout/Question",
+  component: QuestionCard,
 };
 
 type QuestionStory = StoryObj<typeof meta>;

apps/design-system/stories/starIconButton.stories.tsx

@@ -1,4 +1,4 @@
-import { StarIconButton } from "@repo/design-system/starIconButton";
+import { StarIconButton } from "../../../packages/design-system/src/ui/iconButton/starIconButton";
 import { Meta, StoryObj } from "@storybook/react";
 
 export default {

apps/design-system/stories/toggleButton.stories.tsx

@@ -1,5 +1,5 @@
 import { YesIcon } from "@repo/design-system/demo";
-import { ToggleButton } from "@repo/design-system/toggleButton";
+import { ToggleButton } from "@repo/design-system/ui";
 import { Meta, StoryObj } from "@storybook/react";
 
 export default {

apps/design-system/stories/toggleIconButton.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { ToggleIconButton } from "@repo/design-system/toggleIconButton";
+import { ToggleIconButton } from "@repo/design-system/ui";
 
 export default {
   title: "Components/ToggleIconButton",

apps/web/app/abc/answerNeutralToggle.tsx

@@ -0,0 +1,17 @@
+import { ToggleButton } from "@repo/design-system/ui";
+import { NeutralIcon } from "@repo/design-system/icons";
+export default function AnswerYesToggle() {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="neutral"
+      icon={NeutralIcon}
+      iconPosition="left"
+      compactable
+      fitContent
+      wider
+    >
+      Nevím
+    </ToggleButton>
+  );
+}

apps/web/app/abc/answerNoToggle.tsx

@@ -0,0 +1,17 @@
+import { ToggleButton } from "@repo/design-system/ui";
+import { NoIcon } from "@repo/design-system/icons";
+export default function AnswerYesToggle() {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="secondary"
+      icon={NoIcon}
+      iconPosition="left"
+      compactable
+      fitContent
+      wider
+    >
+      Ne
+    </ToggleButton>
+  );
+}

apps/web/app/abc/answerYesToggle.tsx

@@ -0,0 +1,17 @@
+import { ToggleButton } from "@repo/design-system/ui";
+import { YesIcon } from "@repo/design-system/icons";
+export default function AnswerYesToggle() {
+  return (
+    <ToggleButton
+      kind="inverse"
+      color="primary"
+      icon={YesIcon}
+      iconPosition="left"
+      compactable
+      fitContent
+      wider
+    >
+      Ano
+    </ToggleButton>
+  );
+}

apps/web/app/abc/clientBlobs.tsx

@@ -0,0 +1,6 @@
+"use client";
+import { Blobs } from "@repo/design-system/ui";
+
+export default function ClientBlobs() {
+  return <Blobs />;
+}

apps/web/app/abc/header.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Logo } from "@repo/design-system/svg";
+import { useQuestionsStore } from "./providers/storeProvider";
+import { Button } from "@repo/design-system/ui";
+import { CloseIcon } from "@repo/design-system/icons";
+import { usePathname } from "next/navigation";
+
+export default function Header() {
+  const guide = useQuestionsStore((state) => state.guide);
+  const path = usePathname();
+
+  return (
+    <header className="sticky bottom-0 max-w-[100vw] bg-white">
+      <div className="flex w-full items-center gap-2 p-2 xs:p-4 min-[576px]:gap-4 sm:p-8">
+        {/* logo wrapper */}
+        <div className="flex gap-2">
+          <Logo className="h-5 w-[5.953rem]" />
+          <div className="hidden text-sm font-bold uppercase sm:block">
+            Volební kalkulačka
+          </div>
+        </div>
+        <div className="flex flex-1 items-center justify-between">
+          {/* title component, refactor */}
+          {/* centered title fix on mobile!!! */}
+          {guide[0]?.title && guide[0]?.region ? (
+            <div>
+              <p
+                className="font-primary 
+           text-sm text-neutral max-[575px]:text-xs"
+              >
+                {guide[0]?.title} — {guide[0]?.region}
+              </p>
+            </div>
+          ) : null}
+          {/* refactor visiblity condition later */}
+          {path != "/" && (
+            <Button
+              fitContent
+              kind="link"
+              size="auto"
+              icon={CloseIcon}
+              hasIcon
+              iconPosition="right"
+              // refactor
+              onClick={() => alert("Back to home")}
+            >
+              <span className="hidden sm:inline">Zpět na hlavní stránku</span>
+            </Button>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
+
+// TODO:
+// 1. Check incode comments and fix/refactor

apps/web/app/abc/layout.tsx

@@ -0,0 +1,39 @@
+import "../globals.css";
+import "@repo/design-system/styles";
+import "@repo/design-system/themes/theme-default";
+import { StoreProvider } from "./providers/storeProvider";
+import UrlUpdater from "./utils/urlUpdater";
+import getQuestions from "./utils/getQuestions";
+import Header from "./header";
+import ClientBlobs from "./clientBlobs";
+
+const baseUrl =
+  "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json";
+
+const questions = await getQuestions(baseUrl);
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <StoreProvider questions={questions}>
+        <UrlUpdater>
+          <body>
+            {/* blob container */}
+            <div className="relative grid size-full">
+              <ClientBlobs />
+              {/* root layout */}
+              <div className="flex min-h-screen flex-col">
+                <Header />
+                {children}
+              </div>
+            </div>
+          </body>
+        </UrlUpdater>
+      </StoreProvider>
+    </html>
+  );
+}