Design system/question layout

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/[lang]/otazka/page.tsx

@@ -0,0 +1,217 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+  ClientBottomBar,
+  ClientQuestionWrapper,
+} from "../../temp/ClientWrapper";
+
+import {
+  Spinner,
+  QuestionGuide,
+  QuestionResults,
+} from "@repo/design-system/ui";
+
+import type { Question } from "@repo/schema/dist";
+
+type Questions = {
+  id: string;
+  status: null;
+  important: boolean;
+};
+
+type Steps = {
+  answers: any[];
+  totalQuestion: number;
+  currentQuestion: number;
+};
+
+export default function Page() {
+  const [questions, setQuestions] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [guideDisplay, setGuideDisplay] = useState(true);
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  // steps for progress bar
+  const [steps, setSteps] = useState<Steps>({
+    answers: [],
+    totalQuestion: questions.length,
+    currentQuestion: 0,
+  });
+
+  const questionsArray = steps.answers;
+
+  function handleClick(button: string) {
+    switch (button) {
+      case "inFavour":
+        setSteps((prevSteps) => {
+          const updatedAnswer = prevSteps.answers.map((answer, index) => {
+            if (index === currentQuestion - 1) {
+              return { ...answer, status: true };
+            }
+            return answer;
+          });
+
+          return {
+            ...prevSteps,
+            answers: updatedAnswer,
+            currentQuestion: prevSteps.currentQuestion + 1,
+          };
+        });
+        setCurrentQuestion((prevState) => prevState + 1);
+        break;
+      case "against":
+        setSteps((prevSteps) => {
+          const updatedAnswer = prevSteps.answers.map((answer, index) => {
+            if (index === currentQuestion - 1) {
+              return { ...answer, status: false };
+            }
+            return answer;
+          });
+
+          return {
+            ...prevSteps,
+            answers: updatedAnswer,
+            currentQuestion: prevSteps.currentQuestion + 1,
+          };
+        });
+        setCurrentQuestion((prevState) => prevState + 1);
+        break;
+      case "prev":
+        setCurrentQuestion((prevState) => prevState - 1);
+        setSteps((prevState) => {
+          return {
+            ...prevState,
+            currentQuestion: prevState.currentQuestion - 1,
+          };
+        });
+        break;
+      // fix button naming  and args to "skip" and null set
+      case "next":
+        setCurrentQuestion((prevState) => prevState + 1);
+        setSteps((prevState) => {
+          return {
+            ...prevState,
+            currentQuestion: prevState.currentQuestion + 1,
+          };
+        });
+        break;
+      case "guide":
+        setGuideDisplay(false);
+        setCurrentQuestion((prevState) => prevState + 1);
+        setSteps((prevSteps) => {
+          return {
+            ...prevSteps,
+            currentQuestion: prevSteps.currentQuestion + 1,
+          };
+        });
+        break;
+      case "star":
+        setSteps((prevSteps) => {
+          const updatedAnswer = prevSteps.answers.map((answer, index) => {
+            if (index === currentQuestion - 1) {
+              return { ...answer, important: !answer.important };
+            }
+            return answer;
+          });
+
+          return {
+            ...prevSteps,
+            answers: updatedAnswer,
+            // currentQuestion: prevSteps.currentQuestion + 1,
+          };
+        });
+        break;
+    }
+  }
+
+  useEffect(() => {
+    // 1. Data call and data questions state update
+    const fetchData = async () => {
+      const res = await fetch(
+        "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+      );
+      const data = await res.json();
+      setIsLoading(false);
+      setQuestions(data);
+
+      // populating steps state
+      const answersArray = data.map((data: Questions) => {
+        return { answerId: data.id, status: null, important: false };
+      });
+      const answers = {
+        answers: answersArray.flat(),
+        totalQuestion: questions.length,
+        currentQuestion: currentQuestion,
+      };
+
+      setSteps(answers);
+    };
+    fetchData();
+  }, []);
+
+  // cleanup useEffects then
+  useEffect(() => {
+    // console.log("Component rendered")
+  }, [steps]);
+
+  const questionCount = questions.length;
+
+  return (
+    <div className="flex flex-col justify-center self-end">
+      {guideDisplay || currentQuestion === 0 ? (
+        <QuestionGuide onClick={handleClick} />
+      ) : null}
+      {/* // fix glitch beginning */}
+      {currentQuestion > questions.length && currentQuestion !== 0 ? (
+        <QuestionResults />
+      ) : null}
+      {/* loader needed? */}
+      {isLoading && <Spinner />}
+      {/* find better approach than map */}
+      {questions.map((question: Question, index) => {
+        const questionNumber = index + 1;
+        if (questionNumber === currentQuestion) {
+          // cleanup api and get rif of wrapper
+          return (
+            <ClientQuestionWrapper
+              // fix needed: better key naming ?
+              key={`Question: ${question.id}`}
+              currentQuestion={currentQuestion}
+              questionCount={questionCount}
+              question={question}
+              onClick={handleClick}
+              guideDisplay={guideDisplay}
+            />
+          );
+        }
+      })}
+      {/* Bottom bar */}
+      {/* write more elegantly  */}
+      {questionsArray.map((question, index) => {
+        const questionNumber = index + 1;
+        if (question.important === true && questionNumber === currentQuestion) {
+          return (
+            // fix needed: better key naming ?
+            <ClientBottomBar
+              key={`Bottom bar (starPressed): ${question.id}`}
+              starPressed
+              onClick={handleClick}
+              steps={steps}
+            />
+          );
+        } else if (
+          question.important === false &&
+          questionNumber === currentQuestion
+        ) {
+          // fix needed: better key naming ?
+          return (
+            <ClientBottomBar
+              key={`Bottom bar (default): ${question.id}`}
+              onClick={handleClick}
+              steps={steps}
+            />
+          );
+        }
+      })}
+    </div>
+  );
+}

apps/web/app/[lang]/otazky/[index]/page.tsx

@@ -0,0 +1,49 @@
+// import OtazkaComponent from "../../../temp/OtazkaComponent";
+import QuestionPageWrapper from "../../../temp/QuestionPageWrapper";
+
+export async function generateStaticParams() {
+  const res = await fetch(
+    "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+  );
+  const data = await res.json();
+
+  return data.map((_, index) => ({
+    index: index.toString(),
+  }));
+}
+
+async function getQuestion(index) {
+  const res = await fetch(
+    "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+  );
+  const data = await res.json();
+  return data[index];
+}
+
+async function getQuestionsLength() {
+  const res = await fetch(
+    "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+  );
+  const data = await res.json();
+  return data.length;
+}
+
+export default async function Page({ params }) {
+  const question = await getQuestion(params.index);
+  const questionLength = await getQuestionsLength();
+  console.log(questionLength);
+  return (
+    <div>
+      {/* <OtazkaComponent
+        key={question.id}
+        statement={question.statement}
+        detail={question.detail}
+      /> */}
+      <QuestionPageWrapper
+        questions={question}
+        currentQuestion={params.index}
+        questionCount={questionLength}
+      />
+    </div>
+  );
+}

apps/web/app/[lang]/otazky/page.tsx

@@ -0,0 +1,42 @@
+import type { Question } from "@repo/schema/dist";
+import OtazkaComponent from "../../temp/OtazkaComponent";
+import QuestionPageWrapper from "../../temp/QuestionPageWrapper";
+import {
+  ClientBottomBar,
+  ClientQuestionWrapper,
+} from "../../temp/ClientWrapper";
+
+type Props = {
+  params: { otazkaId: string };
+};
+
+async function getData() {
+  const res = await fetch(
+    "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+  );
+  const data = await res.json();
+  return data;
+}
+export default async function Page({ params }: Props) {
+  const questions = await getData();
+  return (
+    <>
+      <span>Next redirect here</span>
+      {/* <span>Questions length: {questions.length}</span>
+      {questions.length > 0 &&
+        questions.map((question: Question, index: number) => {
+          const currentQuestion = index + 1;
+          return (
+            <ClientQuestionWrapper
+              key={`Question: ${question.id}`}
+              currentQuestion={currentQuestion}
+              questionCount={questions.length}
+              question={question}
+            />
+          );
+        })}
+      <ClientBottomBar steps={steps} /> */}
+      {/* <QuestionPageWrapper questions={questions} /> */}
+    </>
+  );
+}