Fixes broken accordion ref

Fixes broken poppable ref adds Schema page Fixes schema creation not including game system id
2024-09-09 08:37:53 -06:00 · 2024-09-09 08:37:53 -06:00 · c8f20fbda8
commit c8f20fbda8
parent a2fde9cc79
9 changed files with 117 additions and 103 deletions
--- a/actions/Schemas/index.ts
+++ b/actions/Schemas/index.ts
@ -22,6 +22,7 @@ export const saveSchemaDb = async (s: Schema, version: number) => {
        },
      },
      authorId: sesh.user.id,
+      gameSystemId: s.gameSystemId,
      id: undefined,
    },
    update: {
--- a/components/Poppables/help.tsx
+++ b/components/Poppables/help.tsx
@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 import { Poppable } from "@/lib/poppables/components/poppable";
-import { Icon } from "@/components/Icon";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";

 export const HelpPopper: FC<PropsWithChildren> = ({ children }) => {
  return (
@ -9,7 +9,7 @@ export const HelpPopper: FC<PropsWithChildren> = ({ children }) => {
      preferredAlign="centered"
      preferredEdge="bottom"
    >
-      <Icon icon="Help" className="svg-white w-4 h-4" />
+      <QuestionMarkCircleIcon className="w-4 h-4 fill-white" />
    </Poppable>
  );
 };
--- a/components/schema/field-editor.tsx
+++ b/components/schema/field-editor.tsx
@ -2,13 +2,14 @@ import { FC, useCallback, useEffect, useState } from "react";
 import { useObjectStateWrapper } from "../../hooks/useObjectState";
 import { ValueField } from "./value-field";
 import { HelpPopper } from "../Poppables/help";
-import { Icon } from "../Icon";
 import { RESERVED_FIELDS } from "../../constants/ReservedFields";
 import {
  fieldTypeOptions,
  FieldTypes,
  fieldTypesWithValues,
 } from "./fieldtypes";
+import { TrashIcon } from "@heroicons/react/24/solid";
+import { FieldType } from "@/types";

 interface IProps {
  update: (arg: FieldType) => void;
@ -17,9 +18,12 @@ interface IProps {
  deleteField: (arg: string) => void;
 }

-export const FieldEditor: FC<IProps> = (
-  { update, field, fieldName, deleteField },
-) => {
+export const FieldEditor: FC<IProps> = ({
+  update,
+  field,
+  fieldName,
+  deleteField,
+}) => {
  const { bindProperty, bindPropertyCheck } = useObjectStateWrapper(
    field,
    (e) => update(typeof e === "function" ? e(field) : e),
@ -83,9 +87,8 @@ export const FieldEditor: FC<IProps> = (
          )}
          <span className="flex items-center gap-2">
            <label>
-              <input type="checkbox" {...bindPropertyCheck("isConstant")} />
-              {" "}
-              Is constant
+              <input type="checkbox" {...bindPropertyCheck("isConstant")} /> Is
+              constant
            </label>
            <HelpPopper>
              <p className="text-sm">
@ -108,7 +111,11 @@ export const FieldEditor: FC<IProps> = (
          </label>
          <label className="w-min">
            Limit:
-            <input className="w-12 min-w-min" type="number" {...bindProperty("limit")} />
+            <input
+              className="w-12 min-w-min"
+              type="number"
+              {...bindProperty("limit")}
+            />
          </label>
          <HelpPopper>
            <p className="text-sm">
@ -122,11 +129,7 @@ export const FieldEditor: FC<IProps> = (
            className="no-default self-end ml-auto"
            onClick={() => deleteField(fieldName)}
          >
-            <Icon
-              className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6"
-              icon="Trash"
-            >
-            </Icon>
+            <TrashIcon className="w-6 h-6 fill-white" />
          </button>
        </div>
      )}
--- a/components/schema/index.tsx
+++ b/components/schema/index.tsx
@ -15,6 +15,8 @@ import { findSchema, saveSchemaDb } from "@/actions/Schemas/index";
 import { useToast } from "../toast";
 import { useAtom } from "jotai";
 import { Schema, TypeType } from "@/types";
+import { TrashIcon } from "@heroicons/react/24/solid";
+import { PencilSquareIcon } from "@heroicons/react/24/solid";

 export const SchemaBuilder: FC = () => {
  const [schema, setSchema] = useAtom<Schema>(SchemaEditAtom);
@ -184,20 +186,14 @@ export const SchemaBuilder: FC = () => {
                    className="no-default"
                    onClick={() => selectTypeForEdit(t)}
                  >
-                    <Icon
-                      icon="Anvil"
-                      className="anvil svg-olive-drab hover:svg-olive-drab-100 w-6 h-6"
-                    />
+                    <PencilSquareIcon className="w-6 h-6 fill-white" />
                  </button>
                  <button
                    title="Delete"
                    className="no-default"
                    onClick={() => deleteType(t)}
                  >
-                    <Icon
-                      icon="Trash"
-                      className="trash-can svg-red-700 hover:svg-red-500 w-6 h-6"
-                    />
+                    <TrashIcon className="w-6 h-6 fill-white" />
                  </button>
                </div>
              </li>
--- a/components/schema/schema-viewer.tsx
+++ b/components/schema/schema-viewer.tsx
@ -34,10 +34,10 @@ export const SchemaViewer: FC<IProps> = ({ schema, onTypeClick }) => {
        <hr />
        <p className="font-bold italic">Templates</p>
        <ul>
-          {Object.entries(schema.schema).map(([templateKey, template]) => (
+          {Object.entries(schema.fields).map(([templateKey, template]) => (
            <li key={templateKey}>
              <p className="font-bold">{templateKey}</p>
-              <p className="font-thin text-xs">{template.type}</p>
+              <p className="text-mixed-600 ml-2">Type: {template}</p>
            </li>
          ))}
        </ul>
--- a/components/schema/template-editor.tsx
+++ b/components/schema/template-editor.tsx
@ -6,6 +6,7 @@ import { FieldTypes } from "./fieldtypes";
 import { useAtom } from "jotai";
 import { useInput } from "@/hooks/useInput";
 import { Schema } from "@/types";
+import { TrashIcon } from "@heroicons/react/24/solid";

 interface IProps {
  templateKey: string;
@ -19,19 +20,11 @@ export const TemplateEditor: FC<IProps> = ({
  fieldType,
 }) => {
  const [schema, setSchema] = useAtom(SchemaEditAtom);
-  // const updateTemplate = useCallback(
-  //   (t: FieldTypes | ((arg: FieldTypes) => FieldTypes)) => {
-  //     update(templateKey, typeof t === "function" ? t(template) : t);
-  //   },
-  //   [templateKey, update, template],
-  // );
-
-  // const { bindProperty } = useObjectStateWrapper(template, updateTemplate);
  const { bind: bindFieldType, value } = useInput(fieldType);

  useEffect(() => {
    update(templateKey, value);
-  });
+  }, []);

  const deleteField = useCallback(() => {
    setSchema((s: Schema) => {
@ -70,10 +63,7 @@ export const TemplateEditor: FC<IProps> = ({
          </label>
        </div>
        <button className="no-default" onClick={deleteField}>
-          <Icon
-            icon="Trash"
-            className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6"
-          />
+          <TrashIcon className="w-6 h-6 fill-white" />
        </button>
      </div>
    </li>
--- a/components/schema/type-editor.tsx
+++ b/components/schema/type-editor.tsx
@ -9,6 +9,7 @@ import { useObjectState } from "../../hooks/useObjectState";
 import { useInput } from "../../hooks/useInput";
 import { FieldEditor } from "./field-editor";
 import { FieldTypes } from "./fieldtypes";
+import { FieldType, TypeType } from "@/types";

 interface IProps {
  name: string;
@ -18,9 +19,11 @@ interface IProps {

 const constantProperties = ["metadata"];

-export const TypeEditor: FC<PropsWithChildren<IProps>> = (
-  { saveType, name, type: passedType },
-) => {
+export const TypeEditor: FC<PropsWithChildren<IProps>> = ({
+  saveType,
+  name,
+  type: passedType,
+}) => {
  const {
    update: updateType,
    reset: resetType,
@ -39,19 +42,22 @@ export const TypeEditor: FC<PropsWithChildren<IProps>> = (
    resetType();
  };

-  const addField = useCallback((e: FormEvent) => {
-    e.preventDefault();
-    updateType({
-      [propertyName]: {
-        type: FieldTypes.number,
-        value: "",
-        isConstant: false,
-        limit: 1,
-        minimum: 1,
-      },
-    });
-    resetPropertyName();
-  }, [propertyName, updateType, resetPropertyName]);
+  const addField = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      updateType({
+        [propertyName]: {
+          type: FieldTypes.number,
+          value: "",
+          isConstant: false,
+          limit: 1,
+          minimum: 1,
+        },
+      });
+      resetPropertyName();
+    },
+    [propertyName, updateType, resetPropertyName],
+  );

  const updateField = useCallback(
    (k: keyof typeof type) => (field: FieldType) => {
@ -64,13 +70,16 @@ export const TypeEditor: FC<PropsWithChildren<IProps>> = (
    passedType && setType(passedType);
  }, [passedType, setType]);

-  const deleteField = useCallback((name: string) => {
-    setType((t) => {
-      const fields = { ...t };
-      delete fields[name];
-      return fields;
-    });
-  }, [setType]);
+  const deleteField = useCallback(
+    (name: string) => {
+      setType((t) => {
+        const fields = { ...t };
+        delete fields[name];
+        return fields;
+      });
+    },
+    [setType],
+  );

  return (
    <div>
@ -82,17 +91,18 @@ export const TypeEditor: FC<PropsWithChildren<IProps>> = (
        <button disabled={!propertyName}>Add Field</button>
      </form>
      <ul className="rounded-lg overflow-hidden">
-        {Object.entries(type).reverse().filter(([k]) =>
-          !constantProperties.includes(k)
-        ).map(([key, value]) => (
-          <FieldEditor
-            key={"field-editor" + key}
-            field={value}
-            update={updateField(key)}
-            fieldName={key}
-            deleteField={deleteField}
-          />
-        ))}
+        {Object.entries(type)
+          .reverse()
+          .filter(([k]) => !constantProperties.includes(k))
+          .map(([key, value]) => (
+            <FieldEditor
+              key={"field-editor" + key}
+              field={value}
+              update={updateField(key)}
+              fieldName={key}
+              deleteField={deleteField}
+            />
+          ))}
      </ul>
      <div>
        <button onClick={save} disabled={!Object.keys(type).length}>
--- a/lib/accordion/index.tsx
+++ b/lib/accordion/index.tsx
@ -6,17 +6,21 @@ interface IProps {
  title?: ReactNode;
 }

-export const Accordion: FC<PropsWithChildren<IProps>> = (
-  { children, expandOnHover, expanded, title },
-) => {
+export const Accordion: FC<PropsWithChildren<IProps>> = ({
+  children,
+  expandOnHover,
+  expanded,
+  title,
+}) => {
  const [open, setOpen] = useState(false);

  return (
    <div
      data-expanded={open || expanded}
      data-expandonhover={expandOnHover}
-      className={(expandOnHover ? "group/hover" : "group/controlled") +
-        " group"}
+      className={
+        (expandOnHover ? "group/hover" : "group/controlled") + " group"
+      }
      onClick={() => !title && !expandOnHover && setOpen(!open)}
    >
      {!!title && (
@ -24,9 +28,7 @@ export const Accordion: FC<PropsWithChildren<IProps>> = (
          className="flex justify-between cursor-pointer"
          onClick={() => !expandOnHover && setOpen(!open)}
        >
-          <div className="accordion-title">
-            {title}
-          </div>
+          <div className="accordion-title">{title}</div>
          <div
            className={`
              group-hover/hover:-rotate-180
@ -41,10 +43,8 @@ export const Accordion: FC<PropsWithChildren<IProps>> = (
              scale-y-50
            `}
          >
-            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center">
-            </span>
-            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center">
-            </span>
+            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center"></span>
+            <span className="block w-2 h-2 rotate-45 border-r-2 border-b-2 place-self-center"></span>
          </div>
        </div>
      )}
@ -64,15 +64,15 @@ export const AccordionContent: FC<PropsWithChildren> = ({ children }) => {
    }
  }, []);

-  const Child = () => (
-    <div className="absolute bottom-0 w-full" ref={updateRef}>
-      {children}
-    </div>
-  );
-
  return (
    <div className="relative overflow-hidden">
-      {<Child />}
+      <div
+        key={"accordion-content"}
+        className="absolute bottom-0 w-full"
+        ref={updateRef}
+      >
+        {children}
+      </div>
      <span
        style={{ ["--v-height" as never]: height + "px" }}
        className="w-0 block h-0 group-hover/hover:h-variable group-data-[expanded]/controlled:h-variable transition-all duration-700"
--- a/lib/poppables/components/poppable.tsx
+++ b/lib/poppables/components/poppable.tsx
@ -1,6 +1,13 @@
 "use client";

-import { FC, PropsWithChildren, ReactNode, useCallback, useState } from "react";
+import {
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import { PoppableContent } from "./poppable-content";
 import { useDebounce } from "../../../hooks/useDebounce";

@ -12,38 +19,45 @@ interface IProps {
  spacing?: number;
 }

-export const Poppable: FC<PropsWithChildren<IProps>> = (
-  { className, content, children, preferredEdge, preferredAlign, spacing },
-) => {
+export const Poppable: FC<PropsWithChildren<IProps>> = ({
+  className,
+  content,
+  children,
+  preferredEdge,
+  preferredAlign,
+  spacing,
+}) => {
  const [isHovered, setIsHovered] = useState(false);
  const closing = useDebounce(!isHovered, 1000);
  const closed = useDebounce(closing, 300);

-  const [ref, setRef] = useState<HTMLElement>();
+  // const [ref, setRef] = useState<HTMLElement>();

-  const updateRef = useCallback((node: HTMLElement) => {
-    if (!node) return;
-    setRef(node);
-  }, []);
+  // const updateRef = useCallback((node: HTMLElement) => {
+  // if (!node) return;
+  // setRef(node);
+  // }, []);
+
+  const ref = useRef(null);

  return (
    <>
      <span
-        ref={updateRef}
+        ref={ref}
        className={className}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {children}
      </span>
-      {!!ref && (
+      {!!ref.current && (
        <PoppableContent
          preferredAlign={preferredAlign}
          preferredEdge={preferredEdge}
          spacing={spacing}
          isClosing={closing}
          isClosed={closed}
-          relativeElement={ref}
+          relativeElement={ref.current}
          setHover={setIsHovered}
        >
          {content}