Merge pull request #88 from cabcookie/staging

UI auf shadcn/ui und Tailwind CSS umstellen
cabcookie · May 28, 2024 · 2dc0142 · 2dc0142
2 parents e7e213c + ef6130a
commit 2dc0142
Show file tree

Hide file tree

Showing 139 changed files with 13,383 additions and 23,266 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,6 @@
   },
   "extends": [
     "next/core-web-vitals",
-    "plugin:storybook/recommended",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"

diff --git a/.storybook/main.ts b/.storybook/main.ts
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,6 +2,8 @@
   "recommendations": [
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "davidanson.vscode-markdownlint"
+    "davidanson.vscode-markdownlint",
+    "bradlc.vscode-tailwindcss",
+    "austenc.tailwind-docs"
   ]
 }
diff --git a/api/useDayplans.ts b/api/useDayplans.ts
@@ -1,6 +1,6 @@
 import { type Schema } from "@/amplify/data/resource";
 import { Context } from "@/contexts/ContextContext";
-import { sortByDate } from "@/helpers/functional";
+import { toISODateString } from "@/helpers/functional";
 import { SelectionSet, generateClient } from "aws-amplify/data";
 import { useEffect, useState } from "react";
 import useSWR from "swr";
@@ -33,7 +33,7 @@ export type DayPlanTodo = {
 
 type DayPlan = {
   id: string;
-  day: string;
+  day: Date;
   dayGoal: string;
   context: Context;
   done: boolean;
@@ -81,7 +81,7 @@ const mapDayPlan: (dayplan: DayPlanData) => DayPlan = ({
   todos,
 }) => ({
   id,
-  day,
+  day: new Date(day),
   dayGoal,
   context: context || "work",
   done: !!done,
@@ -140,7 +140,7 @@ const fetchDayPlans = (context?: Context) => async () => {
   if (!context) return;
   return (await fetchDayPlansWithToken(context))
     ?.map(mapDayPlan)
-    .sort((a, b) => sortByDate(true)([a.day, b.day]));
+    .sort((a, b) => b.day.getTime() - a.day.getTime());
 };
 
 export type CreateTodoFn = (props: {
@@ -244,7 +244,7 @@ const useDayPlans = (context?: Context) => {
   };
 
   const createDayPlan = async (
-    day: string,
+    day: Date,
     dayGoal: string,
     context?: Context
   ) => {
@@ -261,7 +261,7 @@ const useDayPlans = (context?: Context) => {
     };
     mutate([newDayPlan, ...(dayPlans || [])], false);
     const { data, errors } = await client.models.DayPlan.create({
-      day,
+      day: toISODateString(day),
       dayGoal,
       done: false,
       context,
@@ -271,15 +271,42 @@ const useDayPlans = (context?: Context) => {
     mutate([{ ...newDayPlan, id: data.id }, ...(dayPlans || [])]);
   };
 
+  const undoDayplanCompletion = async (dayplan: Schema["DayPlan"]["type"]) => {
+    const updatedDayPlans: DayPlan[] = [
+      ...(dayPlans?.filter(({ id }) => id !== dayplan.id) || []),
+      {
+        id: dayplan.id,
+        context: dayplan.context,
+        day: new Date(dayplan.day),
+        dayGoal: dayplan.dayGoal,
+        done: false,
+        nonprojectTasks: [],
+        projectTasks: [],
+        todos: [],
+      },
+    ];
+    mutate(updatedDayPlans, false);
+    const { data, errors } = await client.models.DayPlan.update({
+      id: dayplan.id,
+      done: false,
+    });
+    if (errors) handleApiErrors(errors, "Error undoing completion of day plan");
+    if (!data) return;
+    mutate(updatedDayPlans);
+    return data;
+  };
+
   const completeDayPlan = async (dayPlanId: string) => {
     const updatedDayPlans = dayPlans?.filter(({ id }) => id !== dayPlanId);
     mutate(updatedDayPlans, false);
-    const { errors } = await client.models.DayPlan.update({
+    const { data, errors } = await client.models.DayPlan.update({
       id: dayPlanId,
       done: true,
     });
     if (errors) handleApiErrors(errors, "Error completing day plan");
+    if (!data) return;
     mutate(updatedDayPlans);
+    return data;
   };
 
   const createTodo: CreateTodoFn = async ({ todo, dayplanId, projectId }) => {
@@ -330,6 +357,7 @@ const useDayPlans = (context?: Context) => {
     loadingDayPlans,
     createDayPlan,
     completeDayPlan,
+    undoDayplanCompletion,
     createTodo,
     switchTodoDone,
     migrateLegacyTasks,

diff --git a/components.json b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/components/CategoryTitle.module.css b/components/CategoryTitle.module.css
diff --git a/components/CategoryTitle.tsx b/components/CategoryTitle.tsx
@@ -1,8 +1,7 @@
 import { useRouter } from "next/router";
 import { ChangeEvent, FC, useEffect, useRef, useState } from "react";
 import { IoChevronBackOutline } from "react-icons/io5";
-import styles from "./CategoryTitle.module.css";
-import SubmitButton from "./ui-elements/buttons/submit-button";
+import { Button } from "./ui/button";
 
 export type CategoryTitleProps = {
   title?: string;
@@ -46,47 +45,54 @@ const CategoryTitle: FC<CategoryTitleProps> = (props) => {
   };
 
   return (
-    <header className={styles.content}>
-      {(props.drawBackBtn || props.onBackBtnClick) && (
-        <div
-          className={styles.backAction}
-          onClick={
-            props.onBackBtnClick ? props.onBackBtnClick : () => router.back()
-          }
-        >
-          <IoChevronBackOutline className={styles.backBtn} />
-        </div>
-      )}
-      {title &&
-        (props.saveTitle && isEditing ? (
-          <textarea
-            rows={1}
-            ref={textAreaRef}
-            value={title}
-            onChange={handleTitleChange}
-            onBlur={handleBlur}
-            className={`${styles.editableTitle} ${styles.alignCenterOnMedium} ${styles.flush}`}
-            autoFocus
-          />
-        ) : (
-          <h1
-            className={`${styles.alignCenterOnMedium} ${styles.flush} ${
-              props.saveTitle ? styles.isEditable : ""
-            }`}
-            onClick={() => (props.saveTitle ? setIsEditing(true) : null)}
-          >
-            {title}
-          </h1>
-        ))}
-      {props.addButton && (
-        <SubmitButton
-          btnClassName={styles.actionBtn}
-          wrapperClassName={styles.action}
-          onClick={props.addButton.onClick}
-        >
-          {props.addButton.label}
-        </SubmitButton>
-      )}
+    <header className="sticky top-12 z-40 bg-bgTransparent pt-3 md:pt-8 pb-4">
+      <div className="flex justify-between gap-2">
+        {(props.drawBackBtn || props.onBackBtnClick) && (
+          <div>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-8 w-8 text-lg md:text-xl text-[--context-color]"
+              onClick={
+                props.onBackBtnClick
+                  ? props.onBackBtnClick
+                  : () => router.back()
+              }
+            >
+              <IoChevronBackOutline />
+            </Button>
+          </div>
+        )}
+        {title && (
+          <div className="text-left md:text-center flex-1 text-2xl md:text-3xl font-bold leading-8 p-0 mt-0 tracking-tight">
+            {props.saveTitle && isEditing ? (
+              <textarea
+                rows={1}
+                ref={textAreaRef}
+                value={title}
+                onChange={handleTitleChange}
+                onBlur={handleBlur}
+                autoFocus
+                className="border-none outline-none w-full overflow-hidden resize-none textarea-bottom-line"
+              />
+            ) : (
+              <div
+                className={
+                  props.saveTitle && "cursor-pointer hover:border-b-2 mb-1"
+                }
+                onClick={() => (props.saveTitle ? setIsEditing(true) : null)}
+              >
+                {title}
+              </div>
+            )}
+          </div>
+        )}
+        {props.addButton && (
+          <Button size="sm" onClick={props.addButton.onClick}>
+            {props.addButton.label}
+          </Button>
+        )}
+      </div>
     </header>
   );
 };