jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: update prettier configuration for print width (#519)

Browse Source 
* feat: update prettier configuration for print width

* chore: apply code formatting to entire repository

* fix: remove build files

* fix: format issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Thomas Camlong
2024-05-19 22:38:39 +02:00
committed by GitHub
parent 919161798e
commit f1b1ec59ec
234 changed files with 2444 additions and 5375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/nextjs/src/components/board/items/item-actions.tsx
View File

@@ -47,12 +47,8 @@ export const useItemActions = () => {
({ kind }: CreateItem) => {
updateBoard((previous) => {
const lastSection = previous.sections
.filter(
(section): section is EmptySection => section.kind === "empty",
)
.sort(
(sectionA, sectionB) => sectionB.position - sectionA.position,
)[0];
.filter((section): section is EmptySection => section.kind === "empty")
.sort((sectionA, sectionB) => sectionB.position - sectionA.position)[0];
if (!lastSection) return previous;
@@ -91,8 +87,7 @@ export const useItemActions = () => {
...previous,
sections: previous.sections.map((section) => {
// Return same section if item is not in it
if (!section.items.some((item) => item.id === itemId))
return section;
if (!section.items.some((item) => item.id === itemId)) return section;
return {
...section,
items: section.items.map((item) => {
@@ -119,8 +114,7 @@ export const useItemActions = () => {
...previous,
sections: previous.sections.map((section) => {
// Return same section if item is not in it
if (!section.items.some((item) => item.id === itemId))
return section;
if (!section.items.some((item) => item.id === itemId)) return section;
return {
...section,
items: section.items.map((item) => {
@@ -128,9 +122,7 @@ export const useItemActions = () => {
if (item.id !== itemId) return item;
return {
...item,
...("integrations" in item
? { integrations: newIntegrations }
: {}),
...("integrations" in item ? { integrations: newIntegrations } : {}),
};
}),
};
@@ -168,18 +160,14 @@ export const useItemActions = () => {
const moveItemToSection = useCallback(
({ itemId, sectionId, ...positionProps }: MoveItemToSection) => {
updateBoard((previous) => {
const currentSection = previous.sections.find((section) =>
section.items.some((item) => item.id === itemId),
);
const currentSection = previous.sections.find((section) => section.items.some((item) => item.id === itemId));
// If item is in the same section (on initial loading) don't do anything
if (!currentSection) {
return previous;
}
const currentItem = currentSection.items.find(
(item) => item.id === itemId,
);
const currentItem = currentSection.items.find((item) => item.id === itemId);
if (!currentItem) {
return previous;
}

17
apps/nextjs/src/components/board/items/item-select-modal.tsx
View File

@@ -13,14 +13,7 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
return (
<Grid>
{objectEntries(widgetImports).map(([key, value]) => {
return (
<WidgetItem
key={key}
kind={key}
definition={value.definition}
closeModal={actions.closeModal}
/>
);
return <WidgetItem key={key} kind={key} definition={value.definition} closeModal={actions.closeModal} />;
})}
</Grid>
);
@@ -56,13 +49,7 @@ const WidgetItem = ({
<Text lh={1.2} style={{ whiteSpace: "normal" }} ta="center">
{t(`widget.${kind}.name`)}
</Text>
<Text
lh={1.2}
style={{ whiteSpace: "normal" }}
size="xs"
ta="center"
c="dimmed"
>
<Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" ta="center" c="dimmed">
{t(`widget.${kind}.description`)}
</Text>
</Stack>

97
apps/nextjs/src/components/board/modals/board-rename-modal.tsx
View File

@@ -15,62 +15,55 @@ interface InnerProps {
onSuccess?: (name: string) => void;
}
export const BoardRenameModal = createModal<InnerProps>(
({ actions, innerProps }) => {
const utils = clientApi.useUtils();
const t = useI18n();
const { mutate, isPending } = clientApi.board.renameBoard.useMutation({
onSettled() {
void utils.board.getBoardByName.invalidate({
name: innerProps.previousName,
});
void utils.board.getHomeBoard.invalidate();
},
});
const form = useZodForm(validation.board.rename.omit({ id: true }), {
initialValues: {
export const BoardRenameModal = createModal<InnerProps>(({ actions, innerProps }) => {
const utils = clientApi.useUtils();
const t = useI18n();
const { mutate, isPending } = clientApi.board.renameBoard.useMutation({
onSettled() {
void utils.board.getBoardByName.invalidate({
name: innerProps.previousName,
});
void utils.board.getHomeBoard.invalidate();
},
});
const form = useZodForm(validation.board.rename.omit({ id: true }), {
initialValues: {
name: innerProps.previousName,
},
});
const handleSubmit = (values: FormType) => {
mutate(
{
id: innerProps.id,
name: values.name,
},
});
const handleSubmit = (values: FormType) => {
mutate(
{
id: innerProps.id,
name: values.name,
{
onSuccess: () => {
actions.closeModal();
innerProps.onSuccess?.(values.name);
},
{
onSuccess: () => {
actions.closeModal();
innerProps.onSuccess?.(values.name);
},
},
);
};
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<TextInput
label={t("board.field.name.label")}
{...form.getInputProps("name")}
data-autofocus
/>
<Group justify="end">
<Button variant="subtle" color="gray" onClick={actions.closeModal}>
{t("common.action.cancel")}
</Button>
<Button type="submit" loading={isPending}>
{t("common.action.confirm")}
</Button>
</Group>
</Stack>
</form>
},
);
},
).withOptions({
defaultTitle: (t) =>
t("board.setting.section.dangerZone.action.rename.modal.title"),
};
return (
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack>
<TextInput label={t("board.field.name.label")} {...form.getInputProps("name")} data-autofocus />
<Group justify="end">
<Button variant="subtle" color="gray" onClick={actions.closeModal}>
{t("common.action.cancel")}
</Button>
<Button type="submit" loading={isPending}>
{t("common.action.confirm")}
</Button>
</Group>
</Stack>
</form>
);
}).withOptions({
defaultTitle: (t) => t("board.setting.section.dangerZone.action.rename.modal.title"),
});
type FormType = Omit<z.infer<(typeof validation)["board"]["rename"]>, "id">;

4
apps/nextjs/src/components/board/permissions/server.ts
View File

@@ -2,9 +2,7 @@ import { auth } from "@homarr/auth/next";
import type { BoardPermissionsProps } from "@homarr/auth/shared";
import { constructBoardPermissions } from "@homarr/auth/shared";
export const getBoardPermissionsAsync = async (
board: BoardPermissionsProps,
) => {
export const getBoardPermissionsAsync = async (board: BoardPermissionsProps) => {
const session = await auth();
return constructBoardPermissions(board, session);
};

22
apps/nextjs/src/components/board/sections/category-section.tsx
View File

@@ -1,12 +1,5 @@
import type { RefObject } from "react";
import {
Card,
Collapse,
Group,
Stack,
Title,
UnstyledButton,
} from "@mantine/core";
import { Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
@@ -30,23 +23,14 @@ export const BoardCategorySection = ({ section, mainRef }: Props) => {
<Group wrap="nowrap" gap="sm">
<UnstyledButton w="100%" p="sm" onClick={toggle}>
<Group wrap="nowrap">
{opened ? (
<IconChevronUp size={20} />
) : (
<IconChevronDown size={20} />
)}
{opened ? <IconChevronUp size={20} /> : <IconChevronDown size={20} />}
<Title order={3}>{section.name}</Title>
</Group>
</UnstyledButton>
<CategoryMenu category={section} />
</Group>
<Collapse in={opened} p="sm" pt={0}>
<div
className="grid-stack grid-stack-category"
data-category
data-section-id={section.id}
ref={refs.wrapper}
>
<div className="grid-stack grid-stack-category" data-category data-section-id={section.id} ref={refs.wrapper}>
<SectionContent items={section.items} refs={refs} />
</div>
</Collapse>

58
apps/nextjs/src/components/board/sections/category/category-actions.ts
View File

@@ -2,11 +2,7 @@ import { useCallback } from "react";
import { createId } from "@homarr/db/client";
import type {
CategorySection,
EmptySection,
Section,
} from "~/app/[locale]/boards/_types";
import type { CategorySection, EmptySection, Section } from "~/app/[locale]/boards/_types";
import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
interface AddCategory {
@@ -41,9 +37,7 @@ export const useCategoryActions = () => {
sections: [
// Place sections before the new category
...previous.sections.filter(
(section) =>
(section.kind === "category" || section.kind === "empty") &&
section.position < position,
(section) => (section.kind === "category" || section.kind === "empty") && section.position < position,
),
{
id: createId(),
@@ -62,8 +56,7 @@ export const useCategoryActions = () => {
...previous.sections
.filter(
(section): section is CategorySection | EmptySection =>
(section.kind === "category" || section.kind === "empty") &&
section.position >= position,
(section.kind === "category" || section.kind === "empty") && section.position >= position,
)
.map((section) => ({
...section,
@@ -134,29 +127,19 @@ export const useCategoryActions = () => {
({ id, direction }: MoveCategory) => {
updateBoard((previous) => {
const currentCategory = previous.sections.find(
(section): section is CategorySection =>
section.kind === "category" && section.id === id,
(section): section is CategorySection => section.kind === "category" && section.id === id,
);
if (!currentCategory) return previous;
if (currentCategory?.position === 1 && direction === "up")
return previous;
if (
currentCategory?.position === previous.sections.length - 2 &&
direction === "down"
)
return previous;
if (currentCategory?.position === 1 && direction === "up") return previous;
if (currentCategory?.position === previous.sections.length - 2 && direction === "down") return previous;
return {
...previous,
sections: previous.sections.map((section) => {
if (section.kind !== "category" && section.kind !== "empty")
return section;
if (section.kind !== "category" && section.kind !== "empty") return section;
const offset = direction === "up" ? -2 : 2;
// Move category and empty section
if (
section.position === currentCategory.position ||
section.position - 1 === currentCategory.position
) {
if (section.position === currentCategory.position || section.position - 1 === currentCategory.position) {
return {
...section,
position: section.position + offset,
@@ -165,8 +148,7 @@ export const useCategoryActions = () => {
if (
direction === "up" &&
(section.position === currentCategory.position - 2 ||
section.position === currentCategory.position - 1)
(section.position === currentCategory.position - 2 || section.position === currentCategory.position - 1)
) {
return {
...section,
@@ -176,8 +158,7 @@ export const useCategoryActions = () => {
if (
direction === "down" &&
(section.position === currentCategory.position + 2 ||
section.position === currentCategory.position + 3)
(section.position === currentCategory.position + 2 || section.position === currentCategory.position + 3)
) {
return {
...section,
@@ -197,21 +178,18 @@ export const useCategoryActions = () => {
({ id: categoryId }: RemoveCategory) => {
updateBoard((previous) => {
const currentCategory = previous.sections.find(
(section): section is CategorySection =>
section.kind === "category" && section.id === categoryId,
(section): section is CategorySection => section.kind === "category" && section.id === categoryId,
);
if (!currentCategory) return previous;
const aboveWrapper = previous.sections.find(
(section): section is EmptySection =>
section.kind === "empty" &&
section.position === currentCategory.position - 1,
section.kind === "empty" && section.position === currentCategory.position - 1,
);
const removedWrapper = previous.sections.find(
(section): section is EmptySection =>
section.kind === "empty" &&
section.position === currentCategory.position + 1,
section.kind === "empty" && section.position === currentCategory.position + 1,
);
if (!aboveWrapper || !removedWrapper) return previous;
@@ -232,16 +210,10 @@ export const useCategoryActions = () => {
return {
...previous,
sections: [
...previous.sections.filter(
(section) => section.position < currentCategory.position - 1,
),
...previous.sections.filter((section) => section.position < currentCategory.position - 1),
{
...aboveWrapper,
items: [
...aboveWrapper.items,
...previousCategoryItems,
...previousBelowWrapperItems,
],
items: [...aboveWrapper.items, ...previousCategoryItems, ...previousBelowWrapperItems],
},
...previous.sections
.filter(

68
apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx
View File

@@ -16,41 +16,35 @@ interface InnerProps {
onSuccess: (category: Category) => void;
}
export const CategoryEditModal = createModal<InnerProps>(
({ actions, innerProps }) => {
const t = useI18n();
const form = useZodForm(z.object({ name: z.string().min(1) }), {
initialValues: {
name: innerProps.category.name,
},
});
export const CategoryEditModal = createModal<InnerProps>(({ actions, innerProps }) => {
const t = useI18n();
const form = useZodForm(z.object({ name: z.string().min(1) }), {
initialValues: {
name: innerProps.category.name,
},
});
return (
<form
onSubmit={form.onSubmit((values) => {
void innerProps.onSuccess({
...innerProps.category,
name: values.name,
});
actions.closeModal();
})}
>
<Stack>
<TextInput
label={t("section.category.field.name.label")}
data-autofocus
{...form.getInputProps("name")}
/>
<Group justify="right">
<Button onClick={actions.closeModal} variant="subtle" color="gray">
{t("common.action.cancel")}
</Button>
<Button type="submit" color="teal">
{innerProps.submitLabel}
</Button>
</Group>
</Stack>
</form>
);
},
).withOptions({});
return (
<form
onSubmit={form.onSubmit((values) => {
void innerProps.onSuccess({
...innerProps.category,
name: values.name,
});
actions.closeModal();
})}
>
<Stack>
<TextInput label={t("section.category.field.name.label")} data-autofocus {...form.getInputProps("name")} />
<Group justify="right">
<Button onClick={actions.closeModal} variant="subtle" color="gray">
{t("common.action.cancel")}
</Button>
<Button type="submit" color="teal">
{innerProps.submitLabel}
</Button>
</Group>
</Stack>
</form>
);
}).withOptions({});

3
apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
View File

@@ -11,8 +11,7 @@ import { CategoryEditModal } from "./category-edit-modal";
export const useCategoryMenuActions = (category: CategorySection) => {
const { openModal } = useModalAction(CategoryEditModal);
const { openConfirmModal } = useConfirmModal();
const { addCategory, moveCategory, removeCategory, renameCategory } =
useCategoryActions();
const { addCategory, moveCategory, removeCategory, renameCategory } = useCategoryActions();
const t = useI18n();
const createCategoryAtPosition = useCallback(

10
apps/nextjs/src/components/board/sections/category/category-menu.tsx
View File

@@ -67,14 +67,8 @@ const useActions = (category: CategorySection) => {
};
const useEditModeActions = (category: CategorySection) => {
const {
addCategoryAbove,
addCategoryBelow,
moveCategoryUp,
moveCategoryDown,
edit,
remove,
} = useCategoryMenuActions(category);
const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit, remove } =
useCategoryMenuActions(category);
return [
{

52
apps/nextjs/src/components/board/sections/content.tsx
View File

@@ -5,12 +5,7 @@ import { useMemo } from "react";
import type { RefObject } from "react";
import { ActionIcon, Card, Menu } from "@mantine/core";
import { useElementSize } from "@mantine/hooks";
import {
IconDotsVertical,
IconLayoutKanban,
IconPencil,
IconTrash,
} from "@tabler/icons-react";
import { IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
import combineClasses from "clsx";
import { useAtomValue } from "jotai";
@@ -43,12 +38,7 @@ export const SectionContent = ({ items, refs }: Props) => {
return (
<>
{items.map((item) => (
<BoardItem
key={item.id}
refs={refs}
item={item}
opacity={board.opacity}
/>
<BoardItem key={item.id} refs={refs} item={item} opacity={board.opacity} />
))}
</>
);
@@ -133,14 +123,9 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
const { openModal } = useModalAction(WidgetEditModal);
const { openConfirmModal } = useConfirmModal();
const isEditMode = useAtomValue(editModeAtom);
const { updateItemOptions, updateItemIntegrations, removeItem } =
useItemActions();
const { data: integrationData, isPending } =
clientApi.integration.all.useQuery();
const currentDefinition = useMemo(
() => widgetImports[item.kind].definition,
[item.kind],
);
const { updateItemOptions, updateItemIntegrations, removeItem } = useItemActions();
const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
if (!isEditMode || isPending) return null;
@@ -164,9 +149,7 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
integrationData: (integrationData ?? []).filter(
(integration) =>
"supportedIntegrations" in currentDefinition &&
(currentDefinition.supportedIntegrations as string[]).some(
(kind) => kind === integration.kind,
),
(currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
),
integrationSupport: "supportedIntegrations" in currentDefinition,
});
@@ -185,34 +168,19 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
return (
<Menu withinPortal withArrow position="right-start" arrowPosition="center">
<Menu.Target>
<ActionIcon
variant="transparent"
pos="absolute"
top={offset}
right={offset}
style={{ zIndex: 1 }}
>
<ActionIcon variant="transparent" pos="absolute" top={offset} right={offset} style={{ zIndex: 1 }}>
<IconDotsVertical />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown miw={128}>
<Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
<Menu.Item
leftSection={<IconPencil size={16} />}
onClick={openEditModal}
>
<Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
{tItem("action.edit")}
</Menu.Item>
<Menu.Item leftSection={<IconLayoutKanban size={16} />}>
{tItem("action.move")}
</Menu.Item>
<Menu.Item leftSection={<IconLayoutKanban size={16} />}>{tItem("action.move")}</Menu.Item>
<Menu.Divider />
<Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
<Menu.Item
c="red.6"
leftSection={<IconTrash size={16} />}
onClick={openRemoveModal}
>
<Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
{tItem("action.remove")}
</Menu.Item>
</Menu.Dropdown>

6
apps/nextjs/src/components/board/sections/empty-section.tsx
View File

@@ -19,11 +19,7 @@ export const BoardEmptySection = ({ section, mainRef }: Props) => {
return (
<div
className={
section.items.length > 0 || isEditMode
? defaultClasses
: `${defaultClasses} gridstack-empty-wrapper`
}
className={section.items.length > 0 || isEditMode ? defaultClasses : `${defaultClasses} gridstack-empty-wrapper`}
style={{ transitionDuration: "0s" }}
data-empty
data-section-id={section.id}

10
apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
View File

@@ -15,20 +15,14 @@ interface InitializeGridstackProps {
sectionColumnCount: number;
}
export const initializeGridstack = ({
section,
refs,
sectionColumnCount,
}: InitializeGridstackProps) => {
export const initializeGridstack = ({ section, refs, sectionColumnCount }: InitializeGridstackProps) => {
if (!refs.wrapper.current) return false;
// initialize gridstack
const newGrid = refs.gridstack;
newGrid.current = GridStack.init(
{
column: sectionColumnCount,
margin: Math.round(
Math.max(Math.min(refs.wrapper.current.offsetWidth / 100, 10), 1),
),
margin: Math.round(Math.max(Math.min(refs.wrapper.current.offsetWidth / 100, 10), 1)),
cellHeight: 128,
float: true,
alwaysShowResizeHandle: true,

31
apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
View File

@@ -2,17 +2,10 @@ import type { MutableRefObject, RefObject } from "react";
import { createRef, useCallback, useEffect, useMemo, useRef } from "react";
import { useAtomValue } from "jotai";
import type {
GridItemHTMLElement,
GridStack,
GridStackNode,
} from "@homarr/gridstack";
import type { GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";
import type { Section } from "~/app/[locale]/boards/_types";
import {
useMarkSectionAsReady,
useRequiredBoard,
} from "~/app/[locale]/boards/(content)/_context";
import { useMarkSectionAsReady, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
import { editModeAtom } from "../../editMode";
import { useItemActions } from "../../items/item-actions";
import { initializeGridstack } from "./init-gridstack";
@@ -32,10 +25,7 @@ interface UseGridstackProps {
mainRef?: RefObject<HTMLDivElement>;
}
export const useGridstack = ({
section,
mainRef,
}: UseGridstackProps): UseGristackReturnType => {
export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGristackReturnType => {
const isEditMode = useAtomValue(editModeAtom);
const markAsReady = useMarkSectionAsReady();
const { moveAndResizeItem, moveItemToSection } = useItemActions();
@@ -157,10 +147,7 @@ interface UseCssVariableConfiguration {
* @param mainRef reference to the main div wrapping all sections
* @param gridRef reference to the gridstack object
*/
const useCssVariableConfiguration = ({
mainRef,
gridRef,
}: UseCssVariableConfiguration) => {
const useCssVariableConfiguration = ({ mainRef, gridRef }: UseCssVariableConfiguration) => {
const board = useRequiredBoard();
// Get reference to the :root element
@@ -177,10 +164,7 @@ const useCssVariableConfiguration = ({
if (!mainRef?.current) return;
const widgetWidth = mainRef.current.clientWidth / board.columnCount;
// widget width is used to define sizes of gridstack items within global.scss
root?.style.setProperty(
"--gridstack-widget-width",
widgetWidth.toString(),
);
root?.style.setProperty("--gridstack-widget-width", widgetWidth.toString());
gridRef.current?.cellHeight(widgetWidth);
};
onResize();
@@ -194,9 +178,6 @@ const useCssVariableConfiguration = ({
// Define column count by using the sectionColumnCount
useEffect(() => {
root?.style.setProperty(
"--gridstack-column-count",
board.columnCount.toString(),
);
root?.style.setProperty("--gridstack-column-count", board.columnCount.toString());
}, [board.columnCount, root]);
};