emma/tabletop-commander
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 3 Releases Wiki Activity

Fixes broken accordion ref

Browse Source 
Fixes broken poppable ref
adds Schema page
Fixes schema creation not including game system id
This commit is contained in:
Emmaline Autumn 2024-09-09 08:37:53 -06:00
parent a2fde9cc79
commit c8f20fbda8
9 changed files with 117 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
actions/Schemas/index.ts
View File

@ -22,6 +22,7 @@ export const saveSchemaDb = async (s: Schema, version: number) => {
},
},
authorId: sesh.user.id,
gameSystemId: s.gameSystemId,
id: undefined,
},
update: {

4
components/Poppables/help.tsx
View File

@ -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>
);
};

29
components/schema/field-editor.tsx
View File

@ -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>
)}

12
components/schema/index.tsx
View File

@ -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>

4
components/schema/schema-viewer.tsx
View File

@ -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>

16
components/schema/template-editor.tsx
View File

@ -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>

78
components/schema/type-editor.tsx
View File

@ -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}>

38
lib/accordion/index.tsx
View File

@ -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"

38
lib/poppables/components/poppable.tsx
View File

@ -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}