feat: board settings (#137)

* refactor: improve user feedback for general board settings section

* wip: add board settings for background and colors, move danger zone to own file, refactor code

* feat: add shade selector

* feat: add slider for opacity

* fix: issue with invalid hex values for color preview

* refactor: add shared mutation hook for saving partial board settings with invalidate query

* fix: add cleanup for not applied changes to logo and page title

* feat: add layout settings

* feat: add empty custom css section to board settings

* refactor: improve layout of board logo on mobile

* feat: add theme provider for board colors

* refactor: add auto contrast for better contrast of buttons with low primary shade

* feat: add background for boards

* feat: add opacity for boards

* feat: add rename board

* feat: add visibility and delete of board settings

* fix: issue that wrong data is updated with update board method

* refactor: improve danger zone button placement for mobile

* fix: board not revalidated when already in boards layout

* refactor: improve board color preview

* refactor: change save button color to teal, add placeholders for general board settings

* chore: update initial migration

* refactor: remove unnecessary div

* chore: address pull request feedback

* fix: ci issues

* fix: deepsource issues

* chore: address pull request feedback

* fix: formatting issue

* chore: address pull request feedback

packages/ui/src/components/index.tsx

@@ -1 +1,3 @@
 export * from "./count-badge";
+export * from "./select-with-description";
+export * from "./select-with-description-and-badge";

packages/ui/src/components/select-with-custom-items.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import type { SelectProps } from "@mantine/core";
+import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+import { useUncontrolled } from "@mantine/hooks";
+
+interface BaseSelectItem {
+  value: string;
+  label: string;
+}
+
+export interface SelectWithCustomItemsProps<TSelectItem extends BaseSelectItem>
+  extends Pick<
+    SelectProps,
+    "label" | "error" | "defaultValue" | "value" | "onChange" | "placeholder"
+  > {
+  data: TSelectItem[];
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+}
+
+type Props<TSelectItem extends BaseSelectItem> =
+  SelectWithCustomItemsProps<TSelectItem> & {
+    SelectOption: React.ComponentType<TSelectItem>;
+  };
+
+export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
+  data,
+  onChange,
+  value,
+  defaultValue,
+  placeholder,
+  SelectOption,
+  ...props
+}: Props<TSelectItem>) => {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+
+  const [_value, setValue] = useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: null,
+    onChange,
+  });
+
+  const selectedOption = useMemo(
+    () => data.find((item) => item.value === _value),
+    [data, _value],
+  );
+
+  const options = data.map((item) => (
+    <Combobox.Option value={item.value} key={item.value}>
+      <SelectOption {...item} />
+    </Combobox.Option>
+  ));
+
+  const toggle = useCallback(() => combobox.toggleDropdown(), [combobox]);
+  const onOptionSubmit = useCallback(
+    (value: string) => {
+      setValue(
+        value,
+        data.find((item) => item.value === value),
+      );
+      combobox.closeDropdown();
+    },
+    [setValue, data, combobox],
+  );
+
+  return (
+    <Combobox
+      store={combobox}
+      withinPortal={false}
+      onOptionSubmit={onOptionSubmit}
+    >
+      <Combobox.Target>
+        <InputBase
+          {...props}
+          component="button"
+          type="button"
+          pointer
+          rightSection={<Combobox.Chevron />}
+          onClick={toggle}
+          rightSectionPointerEvents="none"
+          multiline
+        >
+          {selectedOption ? (
+            <SelectOption {...selectedOption} />
+          ) : (
+            <Input.Placeholder>{placeholder}</Input.Placeholder>
+          )}
+        </InputBase>
+      </Combobox.Target>
+
+      <Combobox.Dropdown>
+        <Combobox.Options>{options}</Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+};

packages/ui/src/components/select-with-description-and-badge.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import type { MantineColor } from "@mantine/core";
+import { Badge, Group, Text } from "@mantine/core";
+
+import type { SelectWithCustomItemsProps } from "./select-with-custom-items";
+import { SelectWithCustomItems } from "./select-with-custom-items";
+
+export interface SelectItemWithDescriptionBadge {
+  value: string;
+  label: string;
+  badge?: { label: string; color: MantineColor };
+  description: string;
+}
+type Props = SelectWithCustomItemsProps<SelectItemWithDescriptionBadge>;
+
+export const SelectWithDescriptionBadge = (props: Props) => {
+  return (
+    <SelectWithCustomItems<SelectItemWithDescriptionBadge>
+      {...props}
+      SelectOption={SelectOption}
+    />
+  );
+};
+
+const SelectOption = ({
+  label,
+  description,
+  badge,
+}: SelectItemWithDescriptionBadge) => {
+  return (
+    <Group justify="space-between">
+      <div>
+        <Text fz="sm" fw={500}>
+          {label}
+        </Text>
+        <Text fz="xs" opacity={0.6}>
+          {description}
+        </Text>
+      </div>
+
+      {badge && (
+        <Badge color={badge.color} variant="outline" size="sm">
+          {badge.label}
+        </Badge>
+      )}
+    </Group>
+  );
+};

packages/ui/src/components/select-with-description.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Text } from "@mantine/core";
+
+import type { SelectWithCustomItemsProps } from "./select-with-custom-items";
+import { SelectWithCustomItems } from "./select-with-custom-items";
+
+export interface SelectItemWithDescription {
+  value: string;
+  label: string;
+  description: string;
+}
+type Props = SelectWithCustomItemsProps<SelectItemWithDescription>;
+
+export const SelectWithDescription = (props: Props) => {
+  return (
+    <SelectWithCustomItems<SelectItemWithDescription>
+      {...props}
+      SelectOption={SelectOption}
+    />
+  );
+};
+
+const SelectOption = ({ label, description }: SelectItemWithDescription) => {
+  return (
+    <div>
+      <Text fz="sm" fw={500}>
+        {label}
+      </Text>
+      <Text fz="xs" opacity={0.6}>
+        {description}
+      </Text>
+    </div>
+  );
+};